Vue3: migrating from vuex to Pinia (#249)

* Vue3: migrating from vuex to Pinia

* toggle input fixes

* update configureCompat

---------

Co-authored-by: Forms Dev <chirag+new@notionforms.io>

resources/js/pages/settings/account.vue

@@ -18,12 +18,20 @@
 <script>
 import Form from 'vform'
 import axios from 'axios'
+import { useAuthStore } from '../../stores/auth'
 import SeoMeta from '../../mixins/seo-meta.js'
 
 export default {
   scrollToTop: false,
   mixins: [SeoMeta],
 
+  setup () {
+    const authStore = useAuthStore()
+    return {
+      authStore
+    }
+  },
+
   data: () => ({
     metaTitle: 'Account',
     form: new Form({
@@ -39,7 +47,7 @@ export default {
         this.loading = false
         this.alertSuccess(response.data.message)
         // Log out the user.
-        await this.$store.dispatch('auth/logout')
+        await this.authStore.logout()
 
         // Redirect to login.
         this.$router.push({ name: 'login' })

resources/js/pages/settings/admin.vue

@@ -37,6 +37,8 @@
 <script>
 import Form from 'vform'
 import axios from 'axios'
+import { useAuthStore } from '../../stores/auth'
+import { useWorkspacesStore } from '../../stores/workspaces'
 import SeoMeta from '../../mixins/seo-meta.js'
 
 export default {
@@ -45,6 +47,15 @@ export default {
   scrollToTop: false,
   mixins: [SeoMeta],
 
+  setup () {
+    const authStore = useAuthStore()
+    const workspacesStore = useWorkspacesStore()
+    return {
+      authStore,
+      workspacesStore
+    }
+  },
+
   data: () => ({
     metaTitle: 'Admin',
     form: new Form({
@@ -56,21 +67,18 @@ export default {
   methods: {
     async impersonate () {
       this.loading = true
-      this.$store.commit('auth/startImpersonating')
+      this.authStore.startImpersonating()
       axios.get('/api/admin/impersonate/' + encodeURI(this.form.identifier)).then(async (response) => {
         this.loading = false
 
         // Save the token.
-        this.$store.dispatch('auth/saveToken', {
-          token: response.data.token,
-          remember: false
-        })
+        this.authStore.saveToken(response.data.token, false)
 
         // Fetch the user.
-        await this.$store.dispatch('auth/fetchUser')
+        await this.authStore.fetchUser()
 
         // Redirect to the dashboard.
-        this.$store.commit('open/workspaces/set', [])
+        this.workspacesStore.set([])
         this.$router.push({ name: 'home' })
       }).catch((error) => {
         this.alertError(error.response.data.message)

resources/js/pages/settings/billing.vue

@@ -21,9 +21,10 @@
 
 <script>
 import axios from 'axios'
+import { computed } from 'vue'
+import { useAuthStore } from '../../stores/auth'
 import VButton from '../../components/common/Button.vue'
 import SeoMeta from '../../mixins/seo-meta.js'
-import { mapGetters } from 'vuex'
 import AppSumoBilling from '../../components/vendor/appsumo/AppSumoBilling.vue'
 
 export default {
@@ -31,6 +32,13 @@ export default {
   mixins: [SeoMeta],
   scrollToTop: false,
 
+  setup () {
+    const authStore = useAuthStore()
+    return {
+      user : computed(() => authStore.user)
+    }
+  },
+
   data: () => ({
     metaTitle: 'Billing',
     billingLoading: false
@@ -50,10 +58,6 @@ export default {
     }
   },
 
-  computed: {
-    ...mapGetters({
-      user: 'auth/user'
-    })
-  }
+  computed: {}
 }
 </script>

resources/js/pages/settings/index.vue

@@ -38,20 +38,25 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../../stores/auth'
 
 export default {
   middleware: 'auth',
 
+  setup () {
+    const authStore = useAuthStore()
+    return {
+      user : computed(() => authStore.user)
+    }
+  },
+
   data () {
     return {
     }
   },
 
   computed: {
-    ...mapGetters({
-      user: 'auth/user'
-    }),
     tabsList () {
       const tabs = [
         {

resources/js/pages/settings/profile.vue

@@ -24,13 +24,22 @@
 
 <script>
 import Form from 'vform'
-import { mapGetters } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../../stores/auth'
 import SeoMeta from '../../mixins/seo-meta.js'
 
 export default {
   mixins: [SeoMeta],
   scrollToTop: false,
 
+  setup () {
+    const authStore = useAuthStore()
+    return {
+      authStore,
+      user : computed(() => authStore.user)
+    }
+  },
+
   data: () => ({
     metaTitle: 'Profile',
     form: new Form({
@@ -39,10 +48,6 @@ export default {
     })
   }),
 
-  computed: mapGetters({
-    user: 'auth/user'
-  }),
-
   created () {
     // Fill the form with user data.
     this.form.keys().forEach(key => {
@@ -54,7 +59,7 @@ export default {
     async update () {
       const { data } = await this.form.patch('/api/settings/profile')
 
-      this.$store.dispatch('auth/updateUser', { user: data })
+      this.authStore.updateUser(data)
     }
   }
 }

resources/js/pages/settings/workspace.vue

@@ -73,8 +73,10 @@
 </template>
 
 <script>
+import { computed } from 'vue'
 import Form from 'vform'
-import {mapActions, mapState} from 'vuex'
+import { useFormsStore } from '../../stores/forms'
+import { useWorkspacesStore } from '../../stores/workspaces'
 import SeoMeta from '../../mixins/seo-meta.js'
 
 export default {
@@ -82,6 +84,17 @@ export default {
   scrollToTop: false,
   mixins: [SeoMeta],
 
+  setup () {
+    const formsStore = useFormsStore()
+    const workspacesStore = useWorkspacesStore()
+    return {
+      formsStore,
+      workspacesStore,
+      workspaces: computed(() => workspacesStore.content),
+      loading: computed(() => workspacesStore.loading)
+    }
+  },
+
   data: () => ({
     metaTitle: 'Workspaces',
     form: new Form({
@@ -92,28 +105,20 @@ export default {
   }),
 
   mounted() {
-    this.loadWorkspaces()
+    this.workspacesStore.loadIfEmpty()
   },
 
-  computed: {
-    ...mapState({
-      workspaces: state => state['open/workspaces'].content,
-      loading: state => state['open/workspaces'].loading
-    })
-  },
+  computed: {},
 
   methods: {
-    ...mapActions({
-      loadWorkspaces: 'open/workspaces/loadIfEmpty'
-    }),
     switchWorkspace(workspace) {
-      this.$store.commit('open/workspaces/setCurrentId', workspace.id)
+      this.workspacesStore.setCurrentId(workspace.id)
       this.$router.push({name: 'home'})
-      this.$store.dispatch('open/forms/load', workspace.id)
+      this.formsStore.load(workspace.id)
     },
     deleteWorkspace(workspace) {
       this.alertConfirm('Do you really want to delete this workspace? All forms created in this workspace will be removed.', () => {
-        this.$store.dispatch('open/workspaces/delete', workspace.id).then(() => {
+        this.workspacesStore.delete(workspace.id).then(() => {
           this.alertSuccess('Workspace successfully removed.')
         })
       })
@@ -129,7 +134,7 @@ export default {
     },
     async createWorkspace() {
       const {data} = await this.form.post('/api/open/workspaces/create')
-      this.$store.dispatch('open/workspaces/load')
+      this.workspacesStore.load()
       this.workspaceModal = false
     }
   }