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/components/pages/templates/SingleTemplate.vue

@@ -39,7 +39,8 @@
 </template>
 
 <script>
-import store from '~/store'
+import { computed } from 'vue'
+import { useTemplatesStore } from '../../../stores/templates'
 import TemplateTags from './TemplateTags.vue'
 
 export default {
@@ -52,22 +53,29 @@ export default {
     }
   },
 
+  setup () {
+    const templatesStore = useTemplatesStore()
+    return {
+      templatesStore
+    }
+  },
+
   data: () => ({}),
 
   computed: {
     template () {
-      return this.$store.getters['open/templates/getBySlug'](this.slug)
+      return this.templatesStore.getBySlug(this.slug)
     }
   },
 
   watch: {
     slug () {
-      store.dispatch('open/templates/loadTemplate', this.slug)
+      this.templatesStore.loadTemplate(this.slug)
     }
   },
 
   mounted () {
-    store.dispatch('open/templates/loadTemplate', this.slug)
+    this.templatesStore.loadTemplate(this.slug)
   },
 
   methods: {

resources/js/components/pages/templates/TemplateTags.vue

@@ -41,6 +41,9 @@
 </template>
 
 <script>
+import { computed } from 'vue'
+import { useTemplatesStore } from '../../../stores/templates'
+
 export default {
   props: {
     slug: {
@@ -53,19 +56,26 @@ export default {
     }
   },
 
+  setup () {
+    const templatesStore = useTemplatesStore()
+    return {
+      templatesStore
+    }
+  },
+
   data: () => ({}),
 
   computed: {
     template () {
-      return this.$store.getters['open/templates/getBySlug'](this.slug)
+      return this.templatesStore.getBySlug(this.slug)
     },
     types () {
       if (!this.template) return null
-      return this.$store.getters['open/templates/getTemplateTypes'](this.template.types)
+      return this.templatesStore.getTemplateTypes(this.template.types)
     },
     industries () {
       if (!this.template) return null
-      return this.$store.getters['open/templates/getTemplateIndustries'](this.template.industries)
+      return this.templatesStore.getTemplateIndustries(this.template.industries)
     }
   },
 

resources/js/components/pages/templates/TemplatesList.vue

@@ -79,24 +79,25 @@
 </template>
 
 <script>
-import store from '~/store'
-import { mapGetters, mapState } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../../../stores/auth'
+import { useTemplatesStore } from '../../../stores/templates'
 import Form from 'vform'
 import Fuse from 'fuse.js'
 import SingleTemplate from './SingleTemplate.vue'
 
 const loadTemplates = function (onlyMy) {
+  const templatesStore = useTemplatesStore()
   if(onlyMy){
-    store.dispatch('open/templates/loadAll', {'onlymy':true})
+    templatesStore.loadAll({'onlymy':true})
   } else {
-    store.dispatch('open/templates/loadIfEmpty')
+    templatesStore.loadIfEmpty()
   }
 }
 
 export default {
   name: 'TemplatesList',
   components: { SingleTemplate },
-
   props: {
     onlyMy: {
       type: Boolean,
@@ -104,6 +105,18 @@ export default {
     }
   },
 
+  setup () {
+    const authStore = useAuthStore()
+    const templatesStore = useTemplatesStore()
+    return {
+      user : computed(() => authStore.user),
+      templates : computed(() => templatesStore.content),
+      templatesLoading : computed(() => templatesStore.loading),
+      industries : computed(() => templatesStore.industries),
+      types : computed(() => templatesStore.types)
+    }
+  },
+
   data: () => ({
     selectedType: 'all',
     selectedIndustry: 'all',
@@ -119,15 +132,6 @@ export default {
   },
 
   computed: {
-    ...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
-    }),
-    ...mapGetters({
-      user: 'auth/user'
-    }),
     industriesOptions () {
       return [{ name: 'All Industries', value: 'all' }].concat(Object.values(this.industries).map((industry) => {
         return {