[web] Prepare for the switch to Pinia

web-src/src/components/NotificationList.vue

@@ -17,7 +17,6 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
 
 export default {
   name: 'NotificationList',
@@ -30,7 +29,7 @@ export default {
 
   methods: {
     remove(notification) {
-      this.$store.commit(types.DELETE_NOTIFICATION, notification)
+      this.$store.dispatch('delete_notification', notification)
     }
   }
 }

web-src/src/components/SettingsCheckbox.vue

@@ -22,7 +22,6 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
 import webapi from '@/webapi'
 
 export default {
@@ -82,7 +81,7 @@ export default {
       webapi
         .settings_update(this.category_name, option)
         .then(() => {
-          this.$store.commit(types.UPDATE_SETTINGS_OPTION, option)
+          this.$store.dispatch('update_settings_option', option)
           this.statusUpdate = 'success'
         })
         .catch(() => {

web-src/src/components/SettingsIntfield.vue

@@ -28,7 +28,6 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
 import webapi from '@/webapi'
 
 export default {
@@ -112,7 +111,7 @@ export default {
       webapi
         .settings_update(this.category.name, option)
         .then(() => {
-          this.$store.commit(types.UPDATE_SETTINGS_OPTION, option)
+          this.$store.dispatch('update_settings_option', option)
           this.statusUpdate = 'success'
         })
         .catch(() => {

web-src/src/components/SettingsTextfield.vue

@@ -27,7 +27,6 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
 import webapi from '@/webapi'
 
 export default {
@@ -112,7 +111,7 @@ export default {
       webapi
         .settings_update(this.category.name, option)
         .then(() => {
-          this.$store.commit(types.UPDATE_SETTINGS_OPTION, option)
+          this.$store.dispatch('update_settings_option', option)
           this.statusUpdate = 'success'
         })
         .catch(() => {

web-src/src/pages/PageSearchLibrary.vue

@@ -256,7 +256,6 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
 import ContentText from '@/templates/ContentText.vue'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import { GroupByList } from '@/lib/GroupByList'
@@ -372,7 +371,7 @@ export default {
       this.searchMusic(route.query)
       this.searchAudiobooks(route.query)
       this.searchPodcasts(route.query)
-      this.$store.commit(types.ADD_RECENT_SEARCH, route.query.query)
+      this.$store.dispatch('add_recent_search', route.query.query)
     },
 
     searchMusic(query) {

web-src/src/pages/PageSearchSpotify.vue

@@ -296,7 +296,6 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
 import ContentText from '@/templates/ContentText.vue'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import CoverArtwork from '@/components/CoverArtwork.vue'
@@ -511,7 +510,7 @@ export default {
       this.search_query = this.query.query
       this.search_param.limit = this.query.limit ? this.query.limit : PAGE_SIZE
       this.search_param.offset = this.query.offset ? this.query.offset : 0
-      this.$store.commit(types.ADD_RECENT_SEARCH, this.query.query)
+      this.$store.dispatch('add_recent_search', this.query.query)
       this.search_all()
     },
     search_albums_next({ loaded }) {

web-src/src/store/index.js

@@ -153,15 +153,6 @@ export default createStore({
     [types.UPDATE_SETTINGS](state, settings) {
       state.settings = settings
     },
-    [types.UPDATE_SETTINGS_OPTION](state, option) {
-      const settingCategory = state.settings.categories.find(
-          (e) => e.name === option.category
-        ),
-        settingOption = settingCategory.options.find(
-          (e) => e.name === option.name
-        )
-      settingOption.value = option.value
-    },
     [types.UPDATE_LIBRARY_STATS](state, libraryStats) {
       state.library = libraryStats
     },
@@ -195,40 +186,9 @@ export default createStore({
     [types.SPOTIFY_FEATURED_PLAYLISTS](state, featuredPlaylists) {
       state.spotify_featured_playlists = featuredPlaylists
     },
-    [types.ADD_NOTIFICATION](state, notification) {
-      if (notification.topic) {
-        const index = state.notifications.list.findIndex(
-          (elem) => elem.topic === notification.topic
-        )
-        if (index >= 0) {
-          state.notifications.list.splice(index, 1, notification)
-          return
-        }
-      }
-      state.notifications.list.push(notification)
-    },
-    [types.DELETE_NOTIFICATION](state, notification) {
-      const index = state.notifications.list.indexOf(notification)
-
-      if (index !== -1) {
-        state.notifications.list.splice(index, 1)
-      }
-    },
     [types.SEARCH_SOURCE](state, searchSource) {
       state.search_source = searchSource
     },
-    [types.ADD_RECENT_SEARCH](state, query) {
-      const index = state.recent_searches.findIndex((elem) => elem === query)
-      if (index >= 0) {
-        state.recent_searches.splice(index, 1)
-      }
-
-      state.recent_searches.splice(0, 0, query)
-
-      if (state.recent_searches.length > 5) {
-        state.recent_searches.pop()
-      }
-    },
     [types.COMPOSER_TRACKS_SORT](state, sort) {
       state.composer_tracks_sort = sort
     },
@@ -279,14 +239,46 @@ export default createStore({
         topic: notification.topic,
         type: notification.type
       }
-
+      if (newNotification.topic) {
-      commit(types.ADD_NOTIFICATION, newNotification)
+        const index = state.notifications.list.findIndex(
-
+          (elem) => elem.topic === newNotification.topic
+        )
+        if (index >= 0) {
+          state.notifications.list.splice(index, 1, newNotification)
+          return
+        }
+      }
+      state.notifications.list.push(newNotification)
       if (notification.timeout > 0) {
         setTimeout(() => {
-          commit(types.DELETE_NOTIFICATION, newNotification)
+          this.dispatch('delete_notification', newNotification)
         }, notification.timeout)
       }
+    },
+    add_recent_search({ commit, state }, query) {
+      const index = state.recent_searches.findIndex((elem) => elem === query)
+      if (index >= 0) {
+        state.recent_searches.splice(index, 1)
+      }
+      state.recent_searches.splice(0, 0, query)
+      if (state.recent_searches.length > 5) {
+        state.recent_searches.pop()
+      }
+    },
+    delete_notification({ commit, state }, notification) {
+      const index = state.notifications.list.indexOf(notification)
+      if (index !== -1) {
+        state.notifications.list.splice(index, 1)
+      }
+    },
+    update_settings_option({commit, state}, option) {
+      const settingCategory = state.settings.categories.find(
+        (e) => e.name === option.category
+      ),
+      settingOption = settingCategory.options.find(
+        (e) => e.name === option.name
+      )
+      settingOption.value = option.value
     }
   }
 })

web-src/src/store/mutation_types.js

@@ -1,6 +1,5 @@
 export const UPDATE_CONFIG = 'UPDATE_CONFIG'
 export const UPDATE_SETTINGS = 'UPDATE_SETTINGS'
-export const UPDATE_SETTINGS_OPTION = 'UPDATE_SETTINGS_OPTION'
 export const UPDATE_LIBRARY_STATS = 'UPDATE_LIBRARY_STATS'
 export const UPDATE_LIBRARY_RSS_COUNT = 'UPDATE_LIBRARY_RSS_COUNT'
 export const UPDATE_OUTPUTS = 'UPDATE_OUTPUTS'
@@ -14,11 +13,7 @@ export const UPDATE_PAIRING = 'UPDATE_PAIRING'
 export const SPOTIFY_NEW_RELEASES = 'SPOTIFY_NEW_RELEASES'
 export const SPOTIFY_FEATURED_PLAYLISTS = 'SPOTIFY_FEATURED_PLAYLISTS'
 
-export const ADD_NOTIFICATION = 'ADD_NOTIFICATION'
-export const DELETE_NOTIFICATION = 'DELETE_NOTIFICATION'
-
 export const SEARCH_SOURCE = 'SEARCH_SOURCE'
-export const ADD_RECENT_SEARCH = 'ADD_RECENT_SEARCH'
 
 export const COMPOSER_TRACKS_SORT = 'COMPOSER_TRACKS_SORT'
 export const GENRE_TRACKS_SORT = 'GENRE_TRACKS_SORT'