From 3bdd4358d197a6f3dfeb94bef170d0ac80b2552a Mon Sep 17 00:00:00 2001
From: orlinmalkja <54899269+orlinmalkja@users.noreply.github.com>
Date: Thu, 6 Jun 2024 13:48:15 +0200
Subject: [PATCH] refactor: use 'contents' Pinia store (#10)

* refactor: use 'contents' Pinia store, no more Vuex store modules

* style: minor

---------

Co-authored-by: malkja <orlin.malkja@sub.uni-goettingen.de>
---
 src/App.vue                                   |  23 +-
 src/components/ContentView.vue                |   6 +-
 src/components/ImageView.vue                  |   8 +-
 src/components/TreeView.vue                   |  17 +-
 .../annotations/AnnotationsView.vue           |   8 +-
 src/components/header/GlobalHeader.vue        |   8 +-
 src/components/header/Navbar.vue              |  20 +-
 src/components/header/TitleBar.vue            |   8 +-
 .../metadata/CollectionMetadata.vue           |  10 +-
 src/components/metadata/ItemMetadata.vue      |  12 +-
 src/components/metadata/ManifestMetadata.vue  |  11 +-
 src/components/panels/Panel.vue               |   6 +-
 src/main.js                                   |   3 -
 src/store/contents/actions.js                 | 219 --------------
 src/store/contents/getters.js                 |  28 --
 src/store/contents/index.js                   |  12 -
 src/store/contents/mutations.js               |  24 --
 src/store/contents/state.js                   |  10 -
 src/store/index.js                            |   9 -
 src/store/store-flag.d.ts                     |   9 -
 src/stores/contents.ts                        | 280 ++++++++++++++++++
 21 files changed, 352 insertions(+), 379 deletions(-)
 delete mode 100644 src/store/contents/actions.js
 delete mode 100644 src/store/contents/getters.js
 delete mode 100644 src/store/contents/index.js
 delete mode 100644 src/store/contents/mutations.js
 delete mode 100644 src/store/contents/state.js
 delete mode 100644 src/store/index.js
 delete mode 100644 src/store/store-flag.d.ts
 create mode 100644 src/stores/contents.ts

diff --git a/src/App.vue b/src/App.vue
index ce7f8453..c6e4dcdb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -36,9 +36,9 @@ export default {
 import {
   computed, inject, onMounted, ref,
 } from 'vue';
-import { useStore } from 'vuex';
 import { useConfigStore } from '@/stores/config';
-import { useAnnotationsStore } from './stores/annotations';
+import { useAnnotationsStore } from '@/stores/annotations';
+import { useContentsStore } from '@/stores/contents';
 
 import { useI18n } from 'vue-i18n';
 import GlobalHeader from '@/components/header/GlobalHeader.vue';
@@ -49,9 +49,9 @@ import Loading from '@/components/Loading.vue';
 import BaseIcon from '@/components/base/BaseIcon.vue';
 import { initUseDark } from '@/utils/is-dark';
 
-const store = useStore();
 const configStore = useConfigStore()
 const annotationStore = useAnnotationsStore()
+const contentStore = useContentsStore()
 const { t, locale: i18nLocale } = useI18n();
 
 const errorTitle = ref('');
@@ -80,10 +80,10 @@ const ready = computed(() => {
 });
 const annotations = computed<Annotation[]>(() => annotationStore.annotations);
 const config = computed(() => configStore.config);
-const collection = computed<Collection>(() => store.getters['contents/collection']);
-const item = computed<Item>(() => store.getters['contents/item']);
-const manifest = computed<Manifest>(() => store.getters['contents/manifest']);
-const manifests = computed<Manifest[]>(() => store.getters['contents/manifests']);
+const collection = computed<Collection>(() => contentStore.collection);
+const item = computed<Item>(() => contentStore.item); 
+const manifest = computed<Manifest>(() => contentStore.manifest);  
+const manifests = computed<Manifest[]>(() => contentStore.manifests); 
 initUseDark(config.value.container);
 
 onMounted(async () => {
@@ -104,7 +104,8 @@ onMounted(async () => {
 });
 
 async function getCollection(url: string) {
-  await store.dispatch('contents/initCollection', url);
+  const contentStore = useContentsStore()
+  await contentStore.initCollection(url)    
 }
 async function loadConfig() {
   try {
@@ -116,10 +117,12 @@ async function loadConfig() {
   }
 }
 async function getManifest(url: string) {
-  await store.dispatch('contents/initManifest', url);
+  const contentStore = useContentsStore()
+  await contentStore.initManifest(url)     
 }
 async function getItem(url: string) {
-  await store.dispatch('contents/initItem', url);
+  const contentStore = useContentsStore()
+  await contentStore.initItem(url)      
 }
 async function init() {
   const { collection, manifest, item } = config.value;
diff --git a/src/components/ContentView.vue b/src/components/ContentView.vue
index 100e649c..90bdbab9 100644
--- a/src/components/ContentView.vue
+++ b/src/components/ContentView.vue
@@ -21,9 +21,9 @@
 import {
   computed, readonly, ref, watch,
 } from 'vue';
-import { useStore } from 'vuex';
 import { useConfigStore } from '@/stores/config';
 import { useAnnotationsStore } from '@/stores/annotations';
+import { useContentsStore } from '@/stores/contents'
 import Notification from '@/components/Notification.vue';
 import { request } from '@/utils/http';
 import { domParser, delay } from '@/utils';
@@ -35,8 +35,8 @@ const props = defineProps({
 });
 const emit = defineEmits(['loading']);
 
-const store = useStore();
 const configStore = useConfigStore()
+const contentStore = useContentsStore()
 
 const content = ref('');
 const errorTextMessage = ref(null);
@@ -78,7 +78,7 @@ async function loadContent(url) {
       // TODO: Enable Hover + Tooltip feature when reqs are clarified
       // await store.dispatch('annotations/addHighlightHoverListeners');
 
-      store.commit('contents/setActiveContentUrl', props.url);
+      contentStore.setActiveContentUrl(props.url)
     }, 100);
   } catch (err) {
     errorTextMessage.value = err.message;
diff --git a/src/components/ImageView.vue b/src/components/ImageView.vue
index 3506188f..075d9921 100644
--- a/src/components/ImageView.vue
+++ b/src/components/ImageView.vue
@@ -10,18 +10,18 @@
 <script setup>
 import OpenSeadragon from 'openseadragon';
 import { computed, ref, watch } from 'vue';
-import { useStore } from 'vuex';
+import { useContentsStore } from '@/stores/contents';
 import Notification from '@/components/Notification.vue';
 import { delay } from '@/utils';
 
 const emit = defineEmits('loading');
 
-const store = useStore();
+const contentStore = useContentsStore()
 
 const viewer = ref(null);
 const error = ref(null);
 
-const item = computed(() => store.getters['contents/item']);
+const item = computed(() => contentStore.item);
 const imageUrl = computed(() => item.value?.image?.id);
 const options = computed(() => ({
   id: 'openseadragon',
@@ -80,4 +80,4 @@ function initOpenSeagragon() {
     emit('loading', false);
   });
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/src/components/TreeView.vue b/src/components/TreeView.vue
index efe96551..ac5fa2bd 100644
--- a/src/components/TreeView.vue
+++ b/src/components/TreeView.vue
@@ -47,16 +47,16 @@ import Tree from 'primevue/tree';
 import {
   computed, nextTick, onMounted, ref, watch,
 } from 'vue';
-import { useStore } from 'vuex';
 import { useConfigStore } from '@/stores/config';
+import { useContentsStore } from '@/stores/contents';
 import { useI18n } from 'vue-i18n';
 import { request } from '@/utils/http';
 import { isElementVisible } from '@/utils';
 
 const emit = defineEmits(['loading']);
 
-const store = useStore();
 const configStore = useConfigStore()
+const contentStore = useContentsStore()
 const { t } = useI18n();
 
 const expanded = ref({});
@@ -65,11 +65,11 @@ const tree = ref([]);
 const containerRef = ref(null);
 
 const config = computed(() => configStore.config);
-const collectionTitle = computed(() => store.getters['contents/collectionTitle']);
-const collection = computed(() => store.getters['contents/collection']);
+const collectionTitle = computed(() => contentStore.collectionTitle); 
+const collection = computed(() => contentStore.collection);  
 const labels = computed(() => (config.value && config.value.labels) || {});
-const itemUrl = computed(() => store.getters['contents/itemUrl']);
-const currentManifest = computed(() => store.getters['contents/manifest']);
+const itemUrl = computed(() => contentStore.itemUrl);  
+const currentManifest = computed(() => contentStore.manifest);
 
 onMounted(() => {
   emit('loading', true);
@@ -165,13 +165,14 @@ async function onNodeExpand(node) {
 
 async function onNodeSelect(node) {
   const configStore = useConfigStore()
+  const contentStore = useContentsStore()
   if (currentManifest.value.id !== node.parent) {
     // If we selected an item from a different manifest
-    await store.dispatch('contents/initManifest', node.parent);
+    await contentStore.initManifest(node.parent)
     await configStore.setDefaultActiveViews()
   }
 
-  await store.dispatch('contents/initItem', node.key);
+  await contentStore.initItem(node.key)     
 }
 
 function scrollSelectedIntoView() {
diff --git a/src/components/annotations/AnnotationsView.vue b/src/components/annotations/AnnotationsView.vue
index 2afc64ff..693f33b5 100644
--- a/src/components/annotations/AnnotationsView.vue
+++ b/src/components/annotations/AnnotationsView.vue
@@ -21,32 +21,32 @@
 
 <script setup lang="ts">
 import {
-  computed, onBeforeUnmount, ref, watch,
+  computed, ref, watch,
 } from 'vue';
-import { useStore } from 'vuex';
 import AnnotationsList from '@/components/annotations/AnnotationsList.vue';
 import Notification from '@/components/Notification.vue';
 import * as AnnotationUtils from '@/utils/annotations';
 
 import { useConfigStore } from '@/stores/config';
 import { useAnnotationsStore } from '@/stores/annotations';
+import { useContentsStore} from '@/stores/contents';
 
 const configStore = useConfigStore()
 const annotationStore = useAnnotationsStore()
+const contentStore = useContentsStore()
 
 const props = defineProps({
   url: String,
   types: Array,
 });
 
-const store = useStore();
 const message = ref('no_annotations_in_view');
 
 const config = computed(() => configStore.config);
 const annotations = computed<Annotation[]>(() => annotationStore.annotations);
 const activeAnnotations = computed<ActiveAnnotation>(() => annotationStore.activeAnnotations);
 const filteredAnnotations = computed<Annotation[]>(() =>  annotationStore.filteredAnnotations);
-const activeContentUrl = computed<string>(() => store.getters['contents/activeContentUrl']);
+const activeContentUrl = computed<string>(() => contentStore.activeContentUrl); 
 const updateTextHighlighting = computed(() =>
   // We need to make sure that annotations are loaded (this.annotations),
   // the text HTML is present in DOM (this.activeContentUrl is set after DOM update)
diff --git a/src/components/header/GlobalHeader.vue b/src/components/header/GlobalHeader.vue
index fa410852..08999809 100644
--- a/src/components/header/GlobalHeader.vue
+++ b/src/components/header/GlobalHeader.vue
@@ -18,8 +18,8 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useStore } from 'vuex';
 import { useConfigStore } from '@/stores/config';
+import { useContentsStore } from '@/stores/contents';
 import Navbar from '@/components/header/Navbar.vue';
 import TitleBar from '@/components/header/TitleBar.vue';
 import PanelsToggle from '@/components/header/PanelsToggle.vue';
@@ -34,12 +34,12 @@ const props = withDefaults(defineProps<Props>(), {
   configErrorTitle: ''
 })
 
-const store = useStore();
 const configStore = useConfigStore()
+const conntentStore = useContentsStore()
+
 const config = computed(() => configStore.config); 
 const show = computed<boolean | undefined>(() => config.value?.header?.show);
-const manifests = computed<Manifest[]>(() => store.getters['contents/manifests']);
-const item = computed<Item>(() => store.getters['contents/item']);
+const item = computed<Item>(() => conntentStore.item);       
 const showNavbar = computed<boolean>(() => config.value?.header?.navigation || true);
 const showPanelsToggle = computed<boolean | undefined>(() => (config.value?.header?.panelsToggle !== undefined ? config.value?.header?.panelsToggle : true));
 </script>
\ No newline at end of file
diff --git a/src/components/header/Navbar.vue b/src/components/header/Navbar.vue
index c294288b..f953d407 100644
--- a/src/components/header/Navbar.vue
+++ b/src/components/header/Navbar.vue
@@ -25,18 +25,18 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useStore } from 'vuex';
 import { useConfigStore } from '@/stores/config';
+import { useContentsStore } from '@/stores/contents'
 import { useI18n } from 'vue-i18n';
 import BaseButton from '@/components/base/BaseButton.vue';
 
-const store = useStore();
 const configStore = useConfigStore()
+const contentStore = useContentsStore()
 const { t } = useI18n();
 
-const manifest = computed<Manifest>(() => store.getters['contents/manifest']);
-const manifests = computed<Manifest[]>(() => store.getters['contents/manifests']);
-const itemUrl = computed<string>(() => store.getters['contents/itemUrl']);
+const manifest = computed<Manifest>(() => contentStore.manifest);
+const manifests = computed<Manifest[]>(() => contentStore.manifests); 
+const itemUrl = computed<string>(() => contentStore.itemUrl); 
 const itemIndex = computed<number>(() => (manifest.value ? manifest.value.sequence.findIndex(({ id }) => id === itemUrl.value) : -1));
 const hasPrev = computed<boolean>(() => {
   const prevIndex = itemIndex.value - 1;
@@ -70,6 +70,7 @@ const prevButtonLabel = computed<string>(() => (itemIndex.value === 0
 
 
 function prev() {
+  const contentStore = useContentsStore()
   const prevIndex = itemIndex.value - 1;
   let itemUrl = '';
 
@@ -79,17 +80,18 @@ function prev() {
     if (prevManifestIndex < 0) return;
 
     const prevManifest = manifests.value[prevManifestIndex];
-    store.commit('contents/setManifest', prevManifest);
+    contentStore.setManifest(prevManifest)
     configStore.setDefaultActiveViews()
     itemUrl = prevManifest.sequence[prevManifest.sequence.length - 1].id;
   } else {
     // We load the previous item
     itemUrl = manifest.value.sequence[prevIndex].id;
   }
-  store.dispatch('contents/initItem', itemUrl);
+  contentStore.initItem(itemUrl)
 }
 
 function next() {
+  const contentStore = useContentsStore()
   const nextIndex = itemIndex.value + 1;
   let itemUrl = '';
 
@@ -98,12 +100,12 @@ function next() {
     if (nextManifestIndex > manifests.value.length - 1) return;
 
     const nextManifest = manifests.value[nextManifestIndex];
-    store.commit('contents/setManifest', nextManifest);
+    contentStore.setManifest(nextManifest)
     configStore.setDefaultActiveViews()
     itemUrl = nextManifest.sequence[0].id;
   } else {
     itemUrl = manifest.value.sequence[nextIndex].id;
   }
-  store.dispatch('contents/initItem', itemUrl);
+  contentStore.initItem(itemUrl)
 }
 </script>
\ No newline at end of file
diff --git a/src/components/header/TitleBar.vue b/src/components/header/TitleBar.vue
index 70e8d972..15f262b3 100644
--- a/src/components/header/TitleBar.vue
+++ b/src/components/header/TitleBar.vue
@@ -35,8 +35,8 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useStore } from 'vuex';
 import { useConfigStore } from '@/stores/config';
+import { useContentsStore } from '@/stores/contents'
 import BaseIcon from '@/components/base/BaseIcon.vue';
 
 
@@ -48,11 +48,11 @@ const props = withDefaults(defineProps<Props>(), {
   item: () => <Item>{}
 })
 
-const store = useStore();
 const configStore = useConfigStore()
+const contentStore = useContentsStore()
 
-const collectionTitle = computed<string | null>(() => store.getters['contents/collectionTitle']);
-const manifestTitle = computed<string | undefined>(() => store.getters['contents/manifest']?.label);
+const collectionTitle = computed<string | null>(() => contentStore.collectionTitle); 
+const manifestTitle = computed<string | undefined>(() => contentStore.manifest?.label  );
 const labels = computed<Labels>(() => configStore.config.labels || {
   manifest: 'manifest',
   item: 'item',
diff --git a/src/components/metadata/CollectionMetadata.vue b/src/components/metadata/CollectionMetadata.vue
index ed80e84e..7c6848fa 100644
--- a/src/components/metadata/CollectionMetadata.vue
+++ b/src/components/metadata/CollectionMetadata.vue
@@ -10,19 +10,19 @@
 <script setup lang="ts">
 
 import { computed } from 'vue';
-import { useStore } from 'vuex';
+import { useContentsStore } from '@/stores/contents';
 import MetadataItem from '@/components/metadata/MetadataItem.vue';
 
 
+const contentStore = useContentsStore()
+
 function getCollectorName (collection: Collection) : string | null {
     if (!collection) return null;
     if(collection.collector.length === 0) return null;
     return collection.collector[0].name;
 }
 
-const store = useStore();
-
-const collection = computed<Collection>(() => store.getters['contents/collection']);
+const collection = computed<Collection>(() => contentStore.collection);
 
 const metadata = computed(() => {
   if (!collection.value) return [];
@@ -51,4 +51,4 @@ const metadata = computed(() => {
 
 <style scoped>
 
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/metadata/ItemMetadata.vue b/src/components/metadata/ItemMetadata.vue
index a5cba911..32616621 100644
--- a/src/components/metadata/ItemMetadata.vue
+++ b/src/components/metadata/ItemMetadata.vue
@@ -10,17 +10,17 @@
 <script setup lang="ts">
 
 import { computed } from 'vue';
-import { useStore } from 'vuex';
 import { useConfigStore } from '@/stores/config';
+import { useContentsStore } from '@/stores/contents'
 
 import MetadataItem from '@/components/metadata/MetadataItem.vue';
 
-const store = useStore();
 const configStore = useConfigStore()
+const contentStore = useContentsStore()
 
-const item = computed<Item>(() => store.getters['contents/item']);
-const itemUrl = computed<string>(() => store.getters['contents/itemUrl']);
-const manifest = computed<Manifest>(() => store.getters['contents/manifest']);
+const item = computed<Item>(() => contentStore.item);    
+const itemUrl = computed<string>(() => contentStore.itemUrl);     
+const manifest = computed<Manifest>(() => contentStore.manifest);
 const itemsCount = computed<number>(() => manifest.value?.sequence.length);
 const labels = computed<Labels>(() => configStore.config.labels);
 const number = computed<number>(() => (manifest.value ? manifest.value.sequence.findIndex(({ id }) => id === itemUrl.value) + 1 : 1));
@@ -37,4 +37,4 @@ const metadata = computed(() => (
 
 <style scoped>
 
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/metadata/ManifestMetadata.vue b/src/components/metadata/ManifestMetadata.vue
index b91e4d2c..e01cf23b 100644
--- a/src/components/metadata/ManifestMetadata.vue
+++ b/src/components/metadata/ManifestMetadata.vue
@@ -10,17 +10,18 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useStore } from 'vuex';
 import { useConfigStore } from '@/stores/config';
+import { useContentsStore } from '@/stores/contents';
 
 import MetadataItem from '@/components/metadata/MetadataItem.vue';
 import Actor from '@/components/metadata/Actor.vue';
 
-const store = useStore();
+
 const configStore = useConfigStore()
+const contentStore = useContentsStore()
 
-const manifest = computed<Manifest>(() => store.getters['contents/manifest']);
-const manifests = computed<Manifest[]>(() => store.getters['contents/manifests']);
+const manifest = computed<Manifest>(() => contentStore.manifest);
+const manifests = computed<Manifest[]>(() => contentStore.manifests);
 const manifestHasItems = computed<boolean>(() => manifest.value?.sequence.length > 0);
 const number = computed<number>(() => (manifests.value !== null ? manifests.value.findIndex(({ id }) => id === manifest.value.id) + 1 : 1));
 const total = computed<number>(() => (manifests.value !== null ? manifests.value.length : 1));
@@ -41,4 +42,4 @@ const actor = computed<Actor[] | undefined>(() => manifest.value?.actor);
 
 <style scoped>
 
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/panels/Panel.vue b/src/components/panels/Panel.vue
index c44dc952..30b9d539 100644
--- a/src/components/panels/Panel.vue
+++ b/src/components/panels/Panel.vue
@@ -94,9 +94,9 @@
 import {
   computed, nextTick, ref, watch,
 } from 'vue';
-import { useStore } from 'vuex';
 import { useConfigStore } from '@/stores/config';
 import { useAnnotationsStore } from '@/stores/annotations';
+import { useContentsStore } from '@/stores/contents'
 import { useI18n } from 'vue-i18n';
 import TabView from 'primevue/tabview';
 import TabPanel from 'primevue/tabpanel';
@@ -137,8 +137,8 @@ export default {
     activeView: Number,
   },
   setup(props, { emit }) {
-    const store = useStore();
     const configStore = useConfigStore()
+    const contentStore = useContentsStore()
     const { t } = useI18n();
 
     const tabs = ref([]);
@@ -146,7 +146,7 @@ export default {
     const unsubscribe = ref(null);
     const isLoading = ref(false);
 
-    const item = computed<Item>(() => store.getters['contents/item']);
+    const item = computed<Item>(() => contentStore.item);
 
     watch(
       () => props.activeView,
diff --git a/src/main.js b/src/main.js
index 0914c20d..c412ca09 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,6 @@
 import { createApp, h } from 'vue';
 import PrimeVue from 'primevue/config';
 import { createPinia } from 'pinia'
-import store from './store';
 import { i18n } from './i18n';
 import App from './App.vue';
 
@@ -24,10 +23,8 @@ window.Tido = function Tido(config = {}) {
     },
   });
   this.app.provide('config', this.config);
-
   this.app.use(PrimeVue);
   this.app.use(pinia);
-  this.app.use(store);
   this.app.use(i18n);
 
   let mounted = false;
diff --git a/src/store/contents/actions.js b/src/store/contents/actions.js
deleted file mode 100644
index 3958cb81..00000000
--- a/src/store/contents/actions.js
+++ /dev/null
@@ -1,219 +0,0 @@
-import { request } from '@/utils/http';
-import { i18n } from '@/i18n';
-import BookmarkService from '@/services/bookmark';
-import { loadCss, loadFont } from '../../utils';
-
-import { useConfigStore } from '@/stores/config';
-import { useAnnotationsStore } from '@/stores/annotations';
-
-
-export const getItemIndex = async ({ getters }, itemUrl) => {
-  const { manifest } = getters;
-  if (!manifest) return -1;
-  return manifest.sequence.findIndex((item) => item.id === itemUrl);
-};
-
-function findActiveManifestIndex(manifests = [], itemUrl = null) {
-  if (manifests.length === 0) return -1;
-  if (!itemUrl) return 0;
-
-  itemUrl = encodeURI(decodeURI(itemUrl));
-
-  return manifests.findIndex(({ sequence }) => {
-    sequence = Array.isArray(sequence) ? sequence : [sequence];
-    return sequence.find(({ id }) => encodeURI(decodeURI(id)) === itemUrl);
-  });
-}
-
-function findManifestIndexOfManifestInConfig(manifests, resultConfig) {
-  // Url of manifest is given in resultConfig as 'manifest'
-  const manifestUrl = resultConfig.manifest;
-  return manifests.findIndex((element) => element.id === manifestUrl);
-}
-
-async function getManifest(url) {
-  const data = await request(url);
-  return data;
-}
-
-function isManifestPartInsideRangeValue(m, numberManifests) {
-  return (m >= 0 && m < numberManifests);
-}
-
-function isItemPartInsideRangeValue(i, numberItems) {
-  const itemAsInt = parseInt(i, 10);
-  return (itemAsInt >= 0 && itemAsInt < numberItems);
-}
-
-export const initCollection = async ({
-  commit, dispatch
-}, url) => {
-  const configStore = useConfigStore()
-  const resultConfig = configStore.config;
-  let item = resultConfig.item;
-  let itemUrl;
-  let collection = '';
-  let activeManifest = '';
-  let manifestIndex;
-  let itemIndex;
-
-  try {
-    collection = await request(url);
-  } catch (err) {
-    throw new Error(i18n.global.t('error_collection_url'));
-  }
-  commit('setCollection', collection);
-
-  const numberManifests = Object.keys(collection).length > 0 ? collection.sequence.length : 0;
-
-  if (numberManifests === 0) {
-    throw new Error(i18n.global.t('error_no_manifests_in_initCollection'));
-  }
-  if ('m' in resultConfig) {
-    if (!isManifestPartInsideRangeValue(resultConfig.m, numberManifests)) {
-      throw new Error(`Please enter 'm' as integer in this range [0,${numberManifests})`);
-    }
-  }
-
-  if (Array.isArray(collection.sequence) && collection.sequence.length > 0) {
-    const promises = [];
-    collection.sequence.forEach((seq) => promises.push(getManifest(seq.id)));
-    const manifests = await Promise.all(promises);
-    commit('setManifests', manifests);
-
-    if ('m' in resultConfig && 'i' in resultConfig) {
-      // Check if manifestIndex or item Index are part of the result config
-      manifestIndex = resultConfig.m;
-      itemIndex = resultConfig.i;
-    } else if ('m' in resultConfig) {
-      manifestIndex = resultConfig.m;
-      itemIndex = 0;
-    } else if ('i' in resultConfig) {
-      itemIndex = resultConfig.i;
-      if ('manifest' in resultConfig && resultConfig.manifest !== '') {
-        // Find the manifest Index of this manifest in this collection
-        manifestIndex = findManifestIndexOfManifestInConfig(manifests, resultConfig);
-      } else {
-        manifestIndex = 0;
-      }
-    } else if ('manifest' in resultConfig && resultConfig.manifest !== '') {
-      manifestIndex = findManifestIndexOfManifestInConfig(manifests, resultConfig);
-      itemIndex = 0;
-    } else {
-      [manifestIndex, itemIndex] = [0, 0];
-    }
-
-    const numberItems = manifests[manifestIndex].sequence.length;
-    if (!isItemPartInsideRangeValue(itemIndex, numberItems)) {
-      throw new Error(`Please enter 'i' as integer in this range [0,${numberItems})`);
-    }
-
-    activeManifest = manifests[manifestIndex];
-    itemUrl = activeManifest.sequence[itemIndex].id;
-    const { support } = activeManifest;
-
-    if (support && support.length > 0) {
-      await dispatch('getSupport', support);
-    }
-    commit('setManifest', activeManifest);
-    dispatch('initItem', itemUrl);
-  }
-};
-
-export const initManifest = async ({
-  commit, dispatch, rootGetters,
-}, url) => {
-  const configStore = useConfigStore()
-  let manifest = '';
-  try {
-    manifest = await request(url);
-  } catch (err) {
-    throw new Error(i18n.global.t('error_manifest_url'));
-  }
-  if (Array.isArray(manifest.sequence) && manifest.sequence.length <= 0) {
-    throw new Error(i18n.global.t('error_no_items_in_manifest'));
-  }
-
-  const numberItems = manifest.sequence.length;
-  commit('setManifest', manifest);
-  const resultConfig = configStore.config;     
-  const { item } = resultConfig;
-  let itemIndex;
-
-  if ('collection' in resultConfig && resultConfig.collection === '') {
-    // we make sure that this error doesn't occur when switching manifest (the condition 'm' & 'i' in resultConfig)
-    if (('m' in resultConfig && 'i' in resultConfig) || 'm' in resultConfig) {
-      throw new Error(i18n.global.t('error_m_in_url_no_collection'));
-    }
-  }
-  if ('i' in resultConfig && 'm' in resultConfig === false) {
-    // when the we switch to an item in a new manifest
-    itemIndex = resultConfig.i;
-  } else if (item !== '') {
-    // find the item index in this manifest
-    itemIndex = manifest.sequence.findIndex((element) => element.id === item);
-    if (itemIndex === -1) {
-      // if the item is not found, then show errors
-      throw new Error(i18n.global.t('error_item_not_in_manifest'));
-    }
-  } else if (resultConfig.manifest !== '') {
-    itemIndex = 0;
-  }
-
-  const { support } = manifest;
-  if (support && support.length > 0) {
-    await dispatch('getSupport', support);
-  }
-
-  if (itemIndex !== undefined) {
-    if (!isItemPartInsideRangeValue(itemIndex, numberItems)) {
-      throw new Error(`Please enter 'i' as integer in this range [0,${numberItems})`);
-    }
-    const itemUrl = manifest.sequence[itemIndex].id;
-    dispatch('initItem', itemUrl);
-  }
-};
-
-export const initItem = async ({ commit, dispatch, getters }, url) => {
-  const annotationStore = useAnnotationsStore()
-  let item = '';
-
-  try {
-    item = await request(url);
-  } catch (err) {
-    throw new Error(i18n.global.t('error_item_url'));
-  }
-  commit('setItem', item);
-  commit('setItemUrl', url);
-
-  if (item.annotationCollection) {
-    annotationStore.initAnnotations(item.annotationCollection);
-  }
-  const manifests = getters.manifests ? getters.manifests : [];
-  // here we have item query -> we should extract the manifest index and the item index from the query and then give it as a parameter to updateItemQuery()
-
-  const i = await dispatch('getItemIndex', url);
-  const m = findActiveManifestIndex(manifests, url);
-
-  const query = manifests.length > 0 ? {
-    m,
-    i,
-  } : { i };
-
-  await BookmarkService.updateQuery(query);
-};
-
-export const updateImageLoading = async ({ commit }, payload) => {
-  commit('setImageLoaded', payload);
-};
-
-export const getSupport = ({ rootGetters }, support) => {
-  const configStore = useConfigStore()
-  const { container } =  configStore.config;  
-
-  support.forEach((s) => {
-    const hasElement = document.getElementById(s.url);
-    if (s.type === 'font' && !hasElement) loadFont(s.url, container);
-    if (s.type !== 'font' && !hasElement) loadCss(s.url);
-  });
-};
\ No newline at end of file
diff --git a/src/store/contents/getters.js b/src/store/contents/getters.js
deleted file mode 100644
index 69489916..00000000
--- a/src/store/contents/getters.js
+++ /dev/null
@@ -1,28 +0,0 @@
-export const collection = (state) => state.collection;
-
-export const collectionTitle = (state) => {
-  // eslint-disable-next-line no-shadow
-  const { collection } = state;
-
-  if (!collection) return null;
-
-  if (Object.keys(collection).length) {
-    return collection.title && collection.title[0].title
-      ? collection.title[0].title
-      : collection.label;
-  }
-
-  return collection.label
-    ? collection.label
-    : 'Manifest <small>(No label available)</small>';
-};
-
-export const itemUrl = (state) => state.itemUrl;
-
-export const manifests = (state) => state.manifests;
-
-export const item = (state) => state.item;
-
-export const manifest = (state) => state.manifest;
-
-export const activeContentUrl = (state) => state.activeContentUrl;
diff --git a/src/store/contents/index.js b/src/store/contents/index.js
deleted file mode 100644
index b0beb1b9..00000000
--- a/src/store/contents/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import state from './state';
-import * as getters from './getters';
-import * as mutations from './mutations';
-import * as actions from './actions';
-
-export default {
-  namespaced: true,
-  state,
-  getters,
-  mutations,
-  actions,
-};
diff --git a/src/store/contents/mutations.js b/src/store/contents/mutations.js
deleted file mode 100644
index 02ec2133..00000000
--- a/src/store/contents/mutations.js
+++ /dev/null
@@ -1,24 +0,0 @@
-export const setCollection = (state, payload) => {
-  state.collection = { ...payload };
-};
-
-export const setItem = (state, payload) => {
-  state.item = payload;
-};
-
-export const setItemUrl = (state, url) => {
-  state.itemUrl = url;
-};
-
-export const setManifests = (state, payload) => {
-  state.manifests = payload;
-};
-
-export const setManifest = (state, payload) => {
-  if (!Array.isArray(payload.sequence)) payload.sequence = [payload.sequence];
-  state.manifest = { ...payload };
-};
-
-export const setActiveContentUrl = (state, payload) => {
-  state.activeContentUrl = payload;
-};
diff --git a/src/store/contents/state.js b/src/store/contents/state.js
deleted file mode 100644
index ad97eac7..00000000
--- a/src/store/contents/state.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export default function ContentsState() {
-  return {
-    activeContentUrl: null,
-    collection: null,
-    item: null,
-    itemUrl: null,
-    manifests: null,
-    manifest: null,
-  };
-}
diff --git a/src/store/index.js b/src/store/index.js
deleted file mode 100644
index 122ba850..00000000
--- a/src/store/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { createStore } from 'vuex';
-
-import contents from './contents';
-
-export default createStore({
-  modules: {
-    contents,
-  },
-});
diff --git a/src/store/store-flag.d.ts b/src/store/store-flag.d.ts
deleted file mode 100644
index ec274bd6..00000000
--- a/src/store/store-flag.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
-//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
-import "quasar/dist/types/feature-flag";
-
-declare module "quasar/dist/types/feature-flag" {
-  interface QuasarFeatureFlags {
-    store: true;
-  }
-}
diff --git a/src/stores/contents.ts b/src/stores/contents.ts
new file mode 100644
index 00000000..54fd4360
--- /dev/null
+++ b/src/stores/contents.ts
@@ -0,0 +1,280 @@
+import { defineStore } from 'pinia'
+import {
+    computed, ref,
+  } from 'vue';
+
+import { request } from '@/utils/http';
+import { i18n } from '@/i18n';
+import BookmarkService from '@/services/bookmark';
+import { loadCss, loadFont } from '../utils';
+import { c } from 'vite/dist/node/types.d-aGj9QkWt';
+import { useConfigStore } from '@/stores/config';
+import { useAnnotationsStore } from '@/stores/annotations';
+
+
+  export const useContentsStore = defineStore('contents', () => {
+  
+    const activeContentUrl = ref<string>(null)
+    const collection = ref<Collection>(null)
+    const item = ref<Item>(null)
+    const itemUrl = ref<string | null>(null)
+    const manifests = ref<Manifest[]>(null)
+    const manifest = ref<Manifest>(null)
+    
+    const collectionTitle = computed<string | null>(() => {  
+        if (!collection.value) return null;
+    
+        if (Object.keys(collection.value).length) {
+        return collection.value.title[0].title
+            ? collection.value.title[0].title
+            : 'Undefined collection title';
+        }
+    
+        return 'Manifest <small>(No label available)</small>'
+  });
+
+  const itemIndex = computed<number> (() => {
+    if (!manifest.value) return -1;
+    return manifest.value.sequence.findIndex((item) => item.id === itemUrl.value);
+  });
+
+  
+  function setCollection(payload: Collection) {
+    collection.value = { ...payload }
+  }
+
+  function setItem (payload: Item) {
+    item.value = payload
+  }
+
+  function setItemUrl (payload: string) {
+    itemUrl.value = payload
+  }
+
+  function setManifests(payload: Manifest[]) {
+    manifests.value = payload
+  }
+      
+  function setManifest(payload: Manifest) {
+    if (!Array.isArray(payload.sequence)) payload.sequence = [payload.sequence];
+    manifest.value = { ...payload };
+  } 
+
+  function setActiveContentUrl(payload: string) {
+    activeContentUrl.value = payload
+  }
+
+    
+  function findActiveManifestIndex(manifests: Manifest[] = [], itemUrl: string | null): number {
+    if (manifests === null) return -1;
+    if (manifests.length === 0) return -1;
+    if (!itemUrl) return 0;
+  
+    itemUrl = encodeURI(decodeURI(itemUrl));
+  
+    return manifests.findIndex(({ sequence }) => {
+      sequence = Array.isArray(sequence) ? sequence : [sequence];
+      return sequence.find(({ id }) => encodeURI(decodeURI(id)) === itemUrl);
+    });
+  }
+  
+  function findManifestIndexOfManifestInConfig(resultConfig) {
+    // Url of manifest is given in resultConfig as 'manifest'
+    const manifestUrl = resultConfig.manifest;
+    return manifests.value.findIndex((element) => element.id === manifestUrl);
+  }
+
+
+  async function getManifest(url: string): Promise<Manifest>{
+    const data: Manifest = await request(url);
+    return data;
+  }
+
+  function isManifestPartInsideRangeValue(m: number, numberManifests: number) {
+    return (m >= 0 && m < numberManifests);
+  }
+  
+  function isItemPartInsideRangeValue(i: number, numberItems: number) {
+    return (i >= 0 && i < numberItems);
+  }
+
+
+ const initCollection = async (url: string) => {
+    const configStore = useConfigStore()
+    const contentStore = useContentsStore()
+    const resultConfig =  configStore.config     
+    let { item: itemUrl } = resultConfig;
+    let collection: Collection;
+    let activeManifest: Manifest;
+    let manifestIndex: number;
+    let itemIndex: number;
+  
+    try {
+      collection = await request(url);
+    } catch (err) {
+      throw new Error(i18n.global.t('error_collection_url'));
+    }
+    contentStore.setCollection(collection)
+  
+    const numberManifests: number = Object.keys(collection).length > 0 ? collection.sequence.length : 0;
+  
+    if (numberManifests === 0) {
+      throw new Error(i18n.global.t('error_no_manifests_in_initCollection'));
+    }
+    if ('m' in resultConfig) {
+      if (!isManifestPartInsideRangeValue(resultConfig.m, numberManifests)) {
+        throw new Error(`Please enter 'm' as integer in this range [0,${numberManifests})`);
+      }
+    }
+  
+    if (Array.isArray(collection.sequence) && collection.sequence.length > 0) {
+      const promises = [];
+      collection.sequence.forEach((seq) => promises.push(getManifest(seq.id)));
+      const manifests: Manifest[] = await Promise.all(promises);
+      contentStore.setManifests(manifests)
+  
+      if ('m' in resultConfig && 'i' in resultConfig) {
+        // Check if manifestIndex or item Index are part of the result config
+        manifestIndex = resultConfig.m;
+        itemIndex = resultConfig.i;
+      } else if ('m' in resultConfig) {
+        manifestIndex = resultConfig.m;
+        itemIndex = 0;
+      } else if ('i' in resultConfig) {
+        itemIndex = resultConfig.i;
+        if ('manifest' in resultConfig && resultConfig.manifest !== '') {
+          // Find the manifest Index of this manifest in this collection
+          manifestIndex = findManifestIndexOfManifestInConfig(resultConfig);
+        } else {
+          manifestIndex = 0;
+        }
+      } else if ('manifest' in resultConfig && resultConfig.manifest !== '') {
+        manifestIndex = findManifestIndexOfManifestInConfig(resultConfig);
+        itemIndex = 0;
+      } else {
+        [manifestIndex, itemIndex] = [0, 0];
+      }
+  
+      const numberItems = manifests[manifestIndex].sequence.length;
+      if (!isItemPartInsideRangeValue(itemIndex, numberItems)) {
+        throw new Error(`Please enter 'i' as integer in this range [0,${numberItems})`);
+      }
+  
+      activeManifest = manifests[manifestIndex];
+      itemUrl = activeManifest.sequence[itemIndex].id;
+      const { support } = activeManifest;
+  
+      if (support && support.length > 0) {
+        await contentStore.getSupport(support)   
+      }
+
+      contentStore.setManifest(activeManifest)
+  
+      if (item) contentStore.initItem(itemUrl)      
+    }
+  };
+
+  const initManifest = async (url: string) => {
+    const contentStore = useContentsStore()
+    let manifest: Manifest;
+    let itemUrl: string;
+    let itemIndex: number;
+    const configStore = useConfigStore()
+
+    try {
+      manifest = await request(url);
+    } catch (err) {
+      throw new Error(i18n.global.t('error_manifest_url'));
+    }
+    if (Array.isArray(manifest.sequence) && manifest.sequence.length <= 0) {
+      throw new Error(i18n.global.t('error_no_items_in_manifest'));
+    }
+  
+    const numberItems: number = manifest.sequence.length;
+    contentStore.setManifest(manifest)
+    const resultConfig = configStore.config;
+    itemUrl = resultConfig.item;
+  
+    if ('collection' in resultConfig && resultConfig.collection === '') {
+      // we make sure that this error doesn't occur when switching manifest (the condition 'm' & 'i' in resultConfig)
+      if (('m' in resultConfig && 'i' in resultConfig) || 'm' in resultConfig) {
+        throw new Error(i18n.global.t('error_m_in_url_no_collection'));
+      }
+    }
+    if ('i' in resultConfig && 'm' in resultConfig === false) {
+      // when the we switch to an item in a new manifest
+      itemIndex = resultConfig.i;
+    } else if (itemUrl !== '') {
+      // find the item index in this manifest
+      itemIndex = manifest.sequence.findIndex((element) => element.id === itemUrl);
+      if (itemIndex === -1) {
+        // if the item is not found, then show errors
+        throw new Error(i18n.global.t('error_item_not_in_manifest'));
+      }
+    } else if (resultConfig.manifest !== '') {
+      itemIndex = 0;
+    }
+  
+    const { support } = manifest;
+    if (support && support.length > 0) {
+      await contentStore.getSupport(support)  
+    }
+  
+    if (itemIndex !== undefined) {
+      if (!isItemPartInsideRangeValue(itemIndex, numberItems)) {
+        throw new Error(`Please enter 'i' as integer in this range [0,${numberItems})`);
+      }
+      itemUrl = manifest.sequence[itemIndex].id;
+      await contentStore.initItem(itemUrl)             
+    }
+  };
+
+
+ const initItem = async (url: string) => {
+  const annotationStore = useAnnotationsStore()
+  const contentStore = useContentsStore()
+  let item: Item;
+
+  try {
+    item = await request(url);
+  } catch (err) {
+    throw new Error(i18n.global.t('error_item_url'));
+  }
+  contentStore.setItem(item)
+  contentStore.setItemUrl(url)
+
+  if (item.annotationCollection) {
+    await annotationStore.initAnnotations(item.annotationCollection)
+  }
+  // here we have item query -> we should extract the manifest index and the item index from the query and then give it as a parameter to updateItemQuery()
+
+  const i = itemIndex.value;
+  const m = contentStore.findActiveManifestIndex(manifests.value, url)
+  
+  const query = (manifests.value && manifests.value.length > 0) ? {
+    m,
+    i,
+  } : { i };
+  await BookmarkService.updateQuery(query);
+};
+
+
+const getSupport = (support) => {
+    const configStore = useConfigStore()
+    const { container } = configStore.config;
+  
+    support.forEach((s) => {
+      const hasElement = document.getElementById(s.url);
+      if (s.type === 'font' && !hasElement) loadFont(s.url, container);
+      if (s.type !== 'font' && !hasElement) loadCss(s.url);
+    });
+  };
+  
+  
+return { activeContentUrl, collection, item, itemUrl, manifests, manifest,     // states
+        collectionTitle, itemIndex,    // computed
+        setCollection, setItem, setItemUrl, setManifests, setManifest, setActiveContentUrl,   //mutations as functions
+        findActiveManifestIndex, findManifestIndexOfManifestInConfig, getManifest, isManifestPartInsideRangeValue,  // actions as functions
+        isItemPartInsideRangeValue, initCollection, initManifest, initItem, getSupport
+        }
+})
\ No newline at end of file