chore(vue3): migrate from vuex to pinia

package.json

@@ -13,10 +13,10 @@
     "@nextcloud/router": "^3.0.1",
     "@nextcloud/vue": "^8.23.1",
     "@simplewebauthn/browser": "^13.1.0",
+    "pinia": "^2.3.1",
     "vue": "^2.7.16",
     "vue-click-outside": "^1.1.0",
-    "vue-material-design-icons": "^5.3.1",
-    "vuex": "^3.6.2"
+    "vue-material-design-icons": "^5.3.1"
   },
   "devDependencies": {
     "@nextcloud/babel-config": "^1.2.0",

src/components/AddDeviceDialog.vue

@@ -24,7 +24,7 @@
 	<div v-else-if="step === RegistrationSteps.NAMING"
 		class="new-webauthn-device">
 		<span class="icon-loading-small webauthn-loading" />
 		<form @submit.prevent="submit" class="new-webauthn-device__form">
 			<input v-model="name"
 				required
 				type="text"
@@ -54,6 +54,8 @@
 import { startRegistration } from '@simplewebauthn/browser'
 import * as RegistrationService from '../services/RegistrationService.js'
 import logger from '../logger.js'
+import { mapStores } from 'pinia'
+import { useMainStore } from '../store.js'
 
 const RegistrationSteps = Object.freeze({
 	READY: 1,
@@ -83,6 +85,10 @@
 		}
 	},
 
+	computed: {
+		...mapStores(useMainStore),
+	},
+
 	methods: {
 		async start() {
 			this.errorMessage = null
@@ -134,7 +140,7 @@
 					this.name,
 					JSON.stringify(this.registrationResponse),
 				)
-				this.$store.commit('addDevice', device)
+				this.mainStore.addDevice(device)
 				logger.debug('new device added to store', { device })
 			} catch (error) {
 				logger.error('Error persisting webauthn registration', { error })

src/components/Challenge.vue

@@ -46,10 +46,11 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 import { NcButton } from '@nextcloud/vue'
 import { browserSupportsWebAuthn, startAuthentication } from '@simplewebauthn/browser'
 import logger from '../logger.js'
+import { mapState } from 'pinia'
+import { useMainStore } from '../store.js'
 
 export default {
 	name: 'Challenge',
@@ -66,9 +67,7 @@ export default {
 	},
 
 	computed: {
-		...mapGetters({
-			credentialRequestOptions: 'getCredentialRequestOptions',
-		}),
+		...mapState(useMainStore, ['credentialRequestOptions']),
 		httpWarning() {
 			return document.location.protocol !== 'https:'
 		},

src/components/Device.vue

@@ -34,6 +34,8 @@
 import InformationOutline from 'vue-material-design-icons/InformationOutline.vue'
 import { confirmPassword } from '@nextcloud/password-confirmation'
 import moment from '@nextcloud/moment'
+import { mapStores } from 'pinia'
+import { useMainStore } from '../store.js'
 
 export default {
 	name: 'Device',
@@ -45,9 +47,9 @@
 		InformationOutline,
 	},
 	props: {
 		entityId: Number,
 		id: String,
 		name: String,
 		active: Boolean,
 		createdAt: {
 			type: Number,
@@ -55,6 +57,7 @@
 		},
 	},
 	computed: {
+		...mapStores(useMainStore),
 		createdAtFormatted() {
 			if (!this.createdAt) {
 				return
@@ -67,15 +70,15 @@
 		async onDelete() {
 			try {
 				await confirmPassword()
-				await this.$store.dispatch('removeDevice', this.entityId)
+				await this.mainStore.removeDevice(this.entityId)
 			} catch (e) {
 				console.error('could not delete device', e)
 			}
 		},
 		async changeActivation(active) {
 			try {
 				await confirmPassword()
-				await this.$store.dispatch('changeActivationState', {
+				await this.mainStore.changeActivationState({
 					entityId: this.entityId,
 					active,
 				})

src/components/PersonalSettings.vue

@@ -36,9 +36,10 @@
 </template>
 
 <script>
-
 import AddDeviceDialog from './AddDeviceDialog.vue'
 import Device from './Device.vue'
+import { mapState } from 'pinia'
+import { useMainStore } from '../store.js'
 
 export default {
 	name: 'PersonalSettings',
@@ -55,11 +56,9 @@ export default {
 		}
 	},
 	computed: {
-		devices() {
-			return this.$store.state.devices
-		},
+		...mapState(useMainStore, ['devices']),
 		allDeactivated() {
-			return this.$store.state.devices.length > 0 && this.$store.state.devices.every(device => !device.active)
+			return this.devices.length > 0 && this.devices.every(device => !device.active)
 		},
 	},
 }

src/main-challenge.js

@@ -3,19 +3,26 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import store from './store.js'
 import Vue from 'vue'
+import { createPinia, PiniaVuePlugin } from 'pinia'
 import Nextcloud from './mixins/Nextcloud.js'
 import Challenge from './components/Challenge.vue'
 import { loadState } from '@nextcloud/initial-state'
+import { useMainStore } from './store.js'
 
 Vue.mixin(Nextcloud)
 
+Vue.use(PiniaVuePlugin)
+const pinia = createPinia()
+
 const credentialRequestOptions = loadState('twofactor_webauthn', 'credential-request-options')
-store.commit('setCredentialRequestOptions', credentialRequestOptions)
+const mainStore = useMainStore(pinia)
+mainStore.$patch({
+	credentialRequestOptions,
+})
 
 export default new Vue({
 	el: '#twofactor-webauthn-challenge',
-	store,
+	pinia,
 	render: h => h(Challenge),
 })

src/main-login-setup.js

@@ -4,13 +4,16 @@
  */
 
 import Vue from 'vue'
+import { createPinia, PiniaVuePlugin } from 'pinia'
 
 import Nextcloud from './mixins/Nextcloud.js'
-import store from './store.js'
 
 import LoginSetup from './components/LoginSetup.vue'
 
 Vue.mixin(Nextcloud)
 
+Vue.use(PiniaVuePlugin)
+const pinia = createPinia()
+
 const View = Vue.extend(LoginSetup)
-new View({ store }).$mount('#twofactor-webauthn-login-setup')
+new View({ pinia }).$mount('#twofactor-webauthn-login-setup')

src/main-settings.js

@@ -4,16 +4,20 @@
  */
 
 import { loadState } from '@nextcloud/initial-state'
-import store from './store.js'
 import Vue from 'vue'
+import { createPinia, PiniaVuePlugin } from 'pinia'
 
 import Nextcloud from './mixins/Nextcloud.js'
 import PersonalSettings from './components/PersonalSettings.vue'
+import { useMainStore } from './store.js'
 
 import '@nextcloud/password-confirmation/dist/style.css'
 
 Vue.mixin(Nextcloud)
 
+Vue.use(PiniaVuePlugin)
+const pinia = createPinia()
+
 const devices = loadState('twofactor_webauthn', 'devices')
 devices.sort((d1, d2) => {
 	if (!d1.name) {
@@ -24,7 +28,8 @@ devices.sort((d1, d2) => {
 		return d1.name.localeCompare(d2.name)
 	}
 })
-store.replaceState({
+const mainStore = useMainStore(pinia)
+mainStore.$patch({
 	devices,
 })
 
@@ -33,5 +38,5 @@ new View({
 	propsData: {
 		httpWarning: document.location.protocol !== 'https:',
 	},
-	store,
+	pinia,
 }).$mount('#twofactor-webauthn-settings')