[chore] Migrate to pinia (#1229)

package.json

@@ -49,9 +49,9 @@
     "vue-matomo": "^4.2.0",
     "vue-router": "3.1.5",
     "vue-slider-component": "^3.1.1",
-    "vuex": "3.1.2",
-    "vuex-persistedstate": "2.7.0",
-    "webfontloader": "1.6.28"
+    "webfontloader": "1.6.28",
+    "pinia": "2.1.7",
+    "pinia-plugin-persistedstate": "3.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.7",

src/App.vue

@@ -43,6 +43,10 @@ import { CommonQueryParameters } from './router/util'
 import { joinFiltersWithItems, optimizeFilters, serializeFilters } from './logic/filters'
 import { searchQueryGetter } from './logic/queryParams'
 import { filtersItems } from './services'
+import { mapStores } from 'pinia'
+import { useSettingsStore } from '@/stores/settings'
+import { useUserStore } from '@/stores/user'
+import { useNotificationsStore } from '@/stores/notifications'
 
 export default {
   name: 'app',
@@ -71,6 +75,7 @@ export default {
     },
   },
   computed: {
+    ...mapStores(useSettingsStore, useUserStore, useNotificationsStore),
     searchQuery: {
       ...searchQueryGetter(),
     },
@@ -80,14 +85,14 @@ export default {
       return this.searchQuery.filters
     },
     termsAgreed() {
-      console.info('Terms agreement:', this.$store.state.settings.termsAgreed)
-      if (this.$store.state.user.userData) {
+      console.info('Terms agreement:', this.settingsStore.termsAgreed)
+      if (this.userStore.userData) {
         return true
       }
-      return this.$store.state.settings.termsAgreed
+      return this.settingsStore.termsAgreed
     },
     is_locked() {
-      return this.$store.state.processingLocked
+      return this.notificationsStore.processingLocked
     },
   },
   methods: {

src/components/Autocomplete.vue

@@ -106,7 +106,10 @@
 
 <script>
 import ClickOutside from 'vue-click-outside'
+import { mapStores } from 'pinia'
 import FilterFactory from '@/models/FilterFactory'
+import { useAutocompleteStore } from '@/stores/autocomplete'
+import { useUserStore } from '@/stores/user'
 import Explorer from './Explorer'
 
 const AVAILABLE_TYPES = ['mention', 'newspaper', 'topic', 'location', 'person', 'collection']
@@ -149,8 +152,9 @@ export default {
     },
   },
   computed: {
+    ...mapStores(useAutocompleteStore, useUserStore),
     user() {
-      return this.$store.getters['user/user']
+      return this.userStore.user
     },
     staticSuggestions() {
       return this.initialSuggestions.concat(this.recentSuggestions).map((d, idx) => ({
@@ -258,27 +262,21 @@ export default {
       this.showSuggestions = this.q.length > 0
       // debugger;
       if (this.q.length) {
-        this.$store.dispatch('autocomplete/SUGGEST_RECENT_QUERY', this.q).then(res => {
-          this.recentSuggestions = res.map(d => ({
-            ...d,
-            type: 'string',
-          }))
-        })
+        const res = this.autocompleteStore.suggestRecentQuery(this.q)
+        this.recentSuggestions = res.map(d => ({
+          ...d,
+          type: 'string',
+        }))
       }
 
       if (this.q.length > 1) {
-        this.$store
-          .dispatch('autocomplete/SEARCH', {
-            q: this.q.trim(),
-          })
+        this.autocompleteStore
+          .search(this.q.trim())
           .then(res => {
             this.suggestions = [...res, ...this.collectionSuggestions]
           })
         if (this.user) {
-          this.$store
-            .dispatch('autocomplete/SUGGEST_COLLECTIONS', {
-              q: this.q.trim(),
-            })
+          this.autocompleteStore.suggestCollections(this.q.trim())
             .then(res => {
               this.collectionSuggestions = res
               this.suggestions = [...res, ...this.suggestions]
@@ -308,9 +306,7 @@ export default {
       } else if (['string', 'title', 'mention'].includes(type)) {
         const sq = String(q || item.name || this.q || '').trim()
         if (sq.length) {
-          this.$store.dispatch('autocomplete/SAVE_RECENT_QUERY', {
-            q: sq,
-          })
+          this.autocompleteStore.saveRecentQuery(sq)
           this.$emit(
             'submit',
             FilterFactory.create({