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/templates/industries-show.vue

@@ -93,19 +93,21 @@
 </template>
 
 <script>
-import store from '~/store'
 import Form from 'vform'
 import Fuse from 'fuse.js'
-import { mapGetters, mapState } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../../stores/auth'
+import { useTemplatesStore } from '../../stores/templates'
 import SeoMeta from '../../mixins/seo-meta.js'
 import OpenFormFooter from '../../components/pages/OpenFormFooter.vue'
 import Breadcrumb from '../../components/common/Breadcrumb.vue'
 import SingleTemplate from '../../components/pages/templates/SingleTemplate.vue'
 
 const loadTemplates = function () {
-  store.commit('open/templates/startLoading')
-  store.dispatch('open/templates/loadIfEmpty').then(() => {
-    store.commit('open/templates/stopLoading')
+  const templatesStore = useTemplatesStore()
+  templatesStore.startLoading()
+  templatesStore.loadIfEmpty().then(() => {
+    templatesStore.stopLoading()
   })
 }
 
@@ -118,6 +120,20 @@ export default {
     next()
   },
 
+  setup () {
+    const authStore = useAuthStore()
+    const templatesStore = useTemplatesStore()
+    return {
+      authStore,
+      authenticated : computed(() => authStore.check),
+      user : computed(() => authStore.user),
+      templates : computed(() => templatesStore.content),
+      templatesLoading : computed(() => templatesStore.loading),
+      industries : computed(() => templatesStore.industries),
+      types : computed(() => templatesStore.types)
+    }
+  },
+
   data () {
     return {
       selectedType: 'all',
@@ -130,16 +146,6 @@ export default {
   mounted () {},
 
   computed: {
-    ...mapGetters({
-      authenticated: 'auth/check',
-      user: 'auth/user'
-    }),
-    ...mapState({
-      templates: state => state['open/templates'].content,
-      templatesLoading: state => state['open/templates'].loading,
-      industries: state => state['open/templates'].industries,
-      types: state => state['open/templates'].types
-    }),
     breadcrumbs () {
       if (!this.industry) {
         return [{ route: { name: 'templates' }, label: 'Templates' }]

resources/js/pages/templates/show.vue

@@ -196,9 +196,10 @@
 </template>
 
 <script>
-import store from '~/store'
 import Form from 'vform'
-import { mapGetters, mapState } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../../stores/auth'
+import { useTemplatesStore } from '../../stores/templates'
 import OpenFormFooter from '../../components/pages/OpenFormFooter.vue'
 import OpenCompleteForm from '../../components/open/forms/OpenCompleteForm.vue'
 import Breadcrumb from '../../components/common/Breadcrumb.vue'
@@ -213,21 +214,32 @@ export default {
   mixins: [SeoMeta],
 
   beforeRouteEnter (to, from, next) {
+    const templatesStore = useTemplatesStore()
     if (to.params?.slug) {
-      store.dispatch('open/templates/loadTemplate', to.params?.slug)
-      store.dispatch('open/templates/loadTypesAndIndustries')
+      templatesStore.loadTemplate(to.params?.slug)
+      templatesStore.loadTypesAndIndustries()
     }
     next()
   },
 
+  setup () {
+    const authStore = useAuthStore()
+    const templatesStore = useTemplatesStore()
+    return {
+      templatesStore,
+      authenticated : computed(() => authStore.check),
+      user : computed(() => authStore.user),
+      templatesLoading : computed(() => templatesStore.loading)
+    }
+  },
+
   data () {
     return {
       showFormTemplateModal: false
     }
   },
 
-  mounted () {
-  },
+  mounted () {},
 
   methods: {
     cleanQuotes (str) {
@@ -247,13 +259,6 @@ export default {
   },
 
   computed: {
-    ...mapGetters({
-      authenticated: 'auth/check',
-      user: 'auth/user'
-    }),
-    ...mapState({
-      templatesLoading: state => state['open/templates'].loading
-    }),
     breadcrumbs () {
       if (!this.template) {
         return [{ route: { name: 'templates' }, label: 'Templates' }]
@@ -261,7 +266,7 @@ export default {
       return [{ route: { name: 'templates' }, label: 'Templates' }, { label: this.template.name }]
     },
     template () {
-      return this.$store.getters['open/templates/getBySlug'](this.$route.params.slug)
+      return this.templatesStore.getBySlug(this.$route.params.slug)
     },
     form () {
       return this.template ? new Form(this.template.structure) : null

resources/js/pages/templates/types-show.vue

@@ -93,19 +93,21 @@
 </template>
 
 <script>
-import store from '~/store'
 import Form from 'vform'
 import Fuse from 'fuse.js'
-import { mapGetters, mapState } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../../stores/auth'
+import { useTemplatesStore } from '../../stores/templates'
 import SeoMeta from '../../mixins/seo-meta.js'
 import OpenFormFooter from '../../components/pages/OpenFormFooter.vue'
 import Breadcrumb from '../../components/common/Breadcrumb.vue'
 import SingleTemplate from '../../components/pages/templates/SingleTemplate.vue'
 
 const loadTemplates = function () {
-  store.commit('open/templates/startLoading')
-  store.dispatch('open/templates/loadIfEmpty').then(() => {
-    store.commit('open/templates/stopLoading')
+  const templatesStore = useTemplatesStore()
+  templatesStore.startLoading()
+  templatesStore.loadIfEmpty().then(() => {
+    templatesStore.stopLoading()
   })
 }
 
@@ -118,6 +120,19 @@ export default {
     next()
   },
 
+  setup () {
+    const authStore = useAuthStore()
+    const templatesStore = useTemplatesStore()
+    return {
+      authenticated : computed(() => authStore.check),
+      user : computed(() => authStore.user),
+      templates : computed(() => templatesStore.content),
+      templatesLoading : computed(() => templatesStore.loading),
+      industries : computed(() => templatesStore.industries),
+      types : computed(() => templatesStore.types)
+    }
+  },
+
   data () {
     return {
       selectedIndustry: 'all',
@@ -130,16 +145,6 @@ export default {
   mounted () {},
 
   computed: {
-    ...mapGetters({
-      authenticated: 'auth/check',
-      user: 'auth/user'
-    }),
-    ...mapState({
-      templates: state => state['open/templates'].content,
-      templatesLoading: state => state['open/templates'].loading,
-      industries: state => state['open/templates'].industries,
-      types: state => state['open/templates'].types
-    }),
     breadcrumbs () {
       if (!this.type) {
         return [{ route: { name: 'templates' }, label: 'Templates' }]