feat: migrate from vuex to pinia

Signed-off-by: Cleopatra Enjeck M. <[email protected]>

.gitignore

@@ -19,4 +19,5 @@ tests/unit/.phpunit.result.cache
 .DS_Store
 /cypress/videos
 /cypress/downloads
+/cypress/screenshots
 /vendor-bin/*/vendor

package.json

@@ -45,11 +45,11 @@
     "@tiptap/vue-2": "^2.11.0",
     "@vueuse/core": "^11.3.0",
     "debounce": "^2.2.0",
+    "pinia": "^2.3.0",
     "vue": "^2.7.16",
     "vue-material-design-icons": "^5.3.1",
     "vue-papa-parse": "^3.1.0",
-    "vue-router": "^3.6.5",
-    "vuex": "^3.6.2"
+    "vue-router": "^3.6.5"
   },
   "browserslist": [
     "extends @nextcloud/browserslist-config"

renovate.json

@@ -48,10 +48,6 @@
 			"matchPackageNames": ["vue"],
 			"allowedVersions": "<3"
 		},
-		{
-			"matchPackageNames": ["vuex"],
-			"allowedVersions": "<4"
-		},
 		{
 			"matchPackageNames": ["vue-router"],
 			"allowedVersions": "<4"

src/App.vue

@@ -17,10 +17,11 @@
 <script>
 import { NcContent, NcAppContent } from '@nextcloud/vue'
 import Navigation from './modules/navigation/sections/Navigation.vue'
-import { mapGetters } from 'vuex'
+import { mapState, mapActions } from 'pinia'
 import Sidebar from './modules/sidebar/sections/Sidebar.vue'
 import { useResizeObserver } from '@vueuse/core'
 import { loadState } from '@nextcloud/initial-state'
+import { useTablesStore } from './store/store.js'
 
 export default {
 	name: 'App',
@@ -43,22 +44,24 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters(['isLoadingSomething']),
+		...mapState(useTablesStore, ['isLoadingSomething']),
 	},
 	watch: {
 		'$route'(to, from) {
 			this.routing(to)
 		},
 	},
 	async created() {
-		await this.$store.dispatch('loadTablesFromBE')
-		await this.$store.dispatch('getAllContexts')
-		await this.$store.dispatch('loadViewsSharedWithMeFromBE')
-		await this.$store.dispatch('loadTemplatesFromBE')
+		const store = useTablesStore()
+		await store.loadTablesFromBE()
+		await store.getAllContexts()
+		await store.loadViewsSharedWithMeFromBE()
+		await store.loadTemplatesFromBE()
 		this.routing(this.$router.currentRoute)
 		this.observeAppContent()
 	},
 	methods: {
+		...mapActions(useTablesStore, ['loadTablesFromBE', 'getAllContexts', 'loadViewsSharedWithMeFromBE', 'loadTemplatesFromBE', 'setActiveRowId', 'setActiveTableId', 'setActiveViewId', 'setActiveContextId']),
 		routing(currentRoute) {
 			try {
 				if (loadState('tables', 'contextId', undefined)) {
@@ -74,28 +77,28 @@ export default {
 			}
 
 			if (currentRoute.name === 'tableRow' || currentRoute.name === 'viewRow') {
-				this.$store.commit('setActiveRowId', parseInt(currentRoute.params.rowId))
+				this.setActiveRowId(parseInt(currentRoute.params.rowId))
 			} else {
-				this.$store.commit('setActiveRowId', null)
+				this.setActiveRowId(null)
 			}
 			if (currentRoute.path.startsWith('/table/')) {
-				this.$store.commit('setActiveTableId', parseInt(currentRoute.params.tableId))
-				this.setPageTitle(this.$store.getters.activeTable.title)
+				this.setActiveTableId(parseInt(currentRoute.params.tableId))
+				this.setPageTitle(this.activeTable.title)
 				if (!currentRoute.path.includes('/row/')) {
 					this.switchActiveMenuEntry(document.querySelector('header .header-left .app-menu a[title="Tables"]'))
 				}
 			} else if (currentRoute.path.startsWith('/view/')) {
-				this.$store.commit('setActiveViewId', parseInt(currentRoute.params.viewId))
-				this.setPageTitle(this.$store.getters.activeView.title)
+				this.setActiveViewId(parseInt(currentRoute.params.viewId))
+				this.setPageTitle(this.activeView.title)
 				if (!currentRoute.path.includes('/row/')) {
 					this.switchActiveMenuEntry(document.querySelector('header .header-left .app-menu a[title="Tables"]'))
 				}
 			} else if (currentRoute.path.startsWith('/application/')) {
 				const contextId = parseInt(currentRoute.params.contextId)
-				this.$store.commit('setActiveContextId', contextId)
-				this.setPageTitle(this.$store.getters.activeContext.name)
+				this.setActiveContextId(contextId)
+				this.setPageTitle(this.activeContext.name)
 				// This breaks if there are multiple contexts with the same name or another app has the same name. We need a better way to identify the correct element.
-				this.switchActiveMenuEntry(document.querySelector(`header .header-left .app-menu [title="${this.$store.getters.activeContext.name}"]`))
+				this.switchActiveMenuEntry(document.querySelector(`header .header-left .app-menu [title="${this.activeContext.name}"]`))
 
 				// move the focus away from nav bar (import for app-internal switch)
 				const appContent = document.getElementById('app-content-vue')

src/main.js

@@ -3,24 +3,25 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 import { generateFilePath } from '@nextcloud/router'
+import { createPinia, PiniaVuePlugin } from 'pinia'
 import Vue from 'vue'
 import App from './App.vue'
-import Vuex from 'vuex'
-import store from './store/store.js'
 import router from './router.js'
 import VuePapaParse from 'vue-papa-parse'
+import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 
 __webpack_nonce__ = btoa(OC.requestToken) // eslint-disable-line
 // eslint-disable-next-line
 __webpack_public_path__ = generateFilePath('tables', '', 'js/')
 
 Vue.mixin({ methods: { t, n } })
-Vue.use(Vuex)
+Vue.use(PiniaVuePlugin)
+const pinia = createPinia()
 Vue.use(VuePapaParse)
 
 export default new Vue({
 	el: '#content',
 	router,
-	store,
+	pinia,
 	render: h => h(App),
 })

src/modules/main/sections/Dashboard.vue

@@ -115,7 +115,8 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapActions } from 'pinia'
+import { useTablesStore } from '../../../store/store.js'
 import permissionsMixin from '../../../shared/components/ncTable/mixins/permissionsMixin.js'
 import PlaylistPlus from 'vue-material-design-icons/PlaylistPlus.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
@@ -168,7 +169,7 @@ export default {
 		}
 	},
 	computed: {
-		...mapState(['views']),
+		...mapState(useTablesStore, ['views']),
 		getViews() {
 			return this.views.filter(v => v.tableId === this.table.id)
 		},
@@ -184,6 +185,7 @@ export default {
 	},
 
 	methods: {
+		...mapActions(useTablesStore, ['updateTable']),
 		emit,
 		openView(view) {
 			this.$router.push('/view/' + parseInt(view.id)).catch(err => err)
@@ -207,19 +209,31 @@ export default {
 		},
 
 		async updateTableEmoji(emoji) {
-			const res = await this.$store.dispatch('updateTable', { id: this.table.id, data: { title: this.table.title, emoji } })
+			const res = await this.updateTable({
+				id: this.table.id,
+				data: { title: this.table.title, emoji },
+			})
 			if (res) {
-				showSuccess(t('tables', 'Updated table "{emoji}{table}".', { emoji: emoji ? emoji + ' ' : '', table: this.table.title }))
+				showSuccess(t('tables', 'Updated table "{emoji}{table}".', {
+					emoji: emoji ? emoji + ' ' : '',
+					table: this.table.title,
+				}))
 			}
 		},
 
 		async updateTableTitle() {
 			if (this.tableTitle === '' || this.tableTitle === null) {
 				showError(t('tables', 'Cannot update table. Title is missing.'))
 			} else {
-				const res = await this.$store.dispatch('updateTable', { id: this.table.id, data: { title: this.tableTitle, emoji: this.table.emoji } })
+				const res = await this.updateTable({
+					id: this.table.id,
+					data: { title: this.tableTitle, emoji: this.table.emoji },
+				})
 				if (res) {
-					showSuccess(t('tables', 'Updated table "{emoji}{table}".', { emoji: this.icon ? this.icon + ' ' : '', table: this.tableTitle }))
+					showSuccess(t('tables', 'Updated table "{emoji}{table}".', {
+						emoji: this.icon ? this.icon + ' ' : '',
+						table: this.tableTitle,
+					}))
 					this.tableTitle = null
 				}
 			}

src/modules/main/sections/DataTable.vue

@@ -157,8 +157,9 @@ import EmptyTable from './EmptyTable.vue'
 import Connection from 'vue-material-design-icons/Connection.vue'
 import Import from 'vue-material-design-icons/Import.vue'
 import { NcActionButton, NcActions, NcActionCaption } from '@nextcloud/vue'
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 import { emit } from '@nextcloud/event-bus'
+import { useTablesStore } from '../../../store/store.js'
 
 export default {
 	components: {
@@ -212,7 +213,7 @@ export default {
 	},
 
 	computed: {
-		...mapState(['views']),
+		...mapState(useTablesStore, ['views']),
 		hasViews() {
 			return this.views.some(v => v.tableId === this.table.id)
 		},