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/App.vue

@@ -37,6 +37,8 @@
 </template>
 
 <script>
+import { computed } from 'vue'
+import { useAppStore } from '../stores/app'
 import Loading from './Loading.vue'
 import Hotjar from './service/Hotjar.vue'
 import Amplitude from './service/Amplitude.vue'
@@ -44,7 +46,6 @@ import Crisp from './service/Crisp.vue'
 import StopImpersonation from './pages/StopImpersonation.vue'
 import Notifications from './common/Notifications.vue'
 import SeoMeta from '../mixins/seo-meta.js'
-import { mapState } from 'vuex'
 
 // Load layout components dynamically.
 const requireContext = import.meta.glob('../layouts/**.vue', { eager: true })
@@ -74,6 +75,13 @@ export default {
 
   mixins: [SeoMeta],
 
+  setup () {
+    const appStore = useAppStore()
+    return {
+      layout : computed(() => appStore.layout)
+    }
+  },
+
   data: () => ({
     metaTitle: 'OpnForm',
     metaDescription: 'Create beautiful forms for free. Unlimited fields, unlimited submissions. It\'s free and it takes less than 1 minute to create your first form.',
@@ -95,9 +103,6 @@ export default {
     isOnboardingPage () {
       return this.$route.name === 'onboarding'
     },
-    ...mapState({
-      layout: state => state.app.layout
-    }),
     layoutComponent () {
       return layouts[this.layout]
     }

resources/js/components/Loading.vue

@@ -10,7 +10,8 @@
 
 <script>
 // https://github.com/nuxt/nuxt.js/blob/master/lib/app/components/nuxt-loading.vue
-import { mapState } from 'vuex'
+import { computed } from 'vue'
+import { useAppStore } from '../stores/app';
 
 export default {
   data: () => ({
@@ -19,12 +20,13 @@ export default {
     failedColor: 'red'
   }),
 
-  computed: {
-    ...mapState({
-      percent: state => state.app.loader.percent,
-      canSuccess: state => state.app.loader.canSuccess,
-      show: state => state.app.loader.show
-    })
+  setup () {
+    const appStore = useAppStore()
+    return {
+      percent : computed(() => appStore.loader.percent),
+      canSuccess : computed(() => appStore.loader.canSuccess),
+      show : computed(() => appStore.loader.show)
+    }
   }
 }
 </script>

resources/js/components/LoginWithGithub.vue

@@ -14,9 +14,18 @@
 </template>
 
 <script>
+import { useAuthStore } from '../stores/auth'
+
 export default {
   name: 'LoginWithGithub',
 
+  setup () {
+    const authStore = useAuthStore()
+    return {
+      authStore
+    }
+  },
+
   computed: {
     githubAuth: () => window.config.githubAuth,
     url: () => '/api/oauth/github'
@@ -34,9 +43,7 @@ export default {
     async login () {
       const newWindow = openWindow('', 'Login')
 
-      const url = await this.$store.dispatch('auth/fetchOauthUrl', {
-        provider: 'github'
-      })
+      const url = await this.authStore.fetchOauthUrl('github')
 
       newWindow.location.href = url
     },
@@ -49,9 +56,7 @@ export default {
         return
       }
 
-      this.$store.dispatch('auth/saveToken', {
-        token: e.data.token
-      })
+      this.authStore.saveToken(e.data.token)
 
       this.$router.push({ name: 'home' })
     }

resources/js/components/Navbar.vue

@@ -132,7 +132,10 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../stores/auth';
+import { useFormsStore } from '../stores/forms';
+import { useWorkspacesStore } from '../stores/workspaces';
 import Dropdown from './common/Dropdown.vue'
 import WorkspaceDropdown from './WorkspaceDropdown.vue'
 
@@ -142,6 +145,18 @@ export default {
     Dropdown
   },
 
+  setup () {
+    const authStore = useAuthStore()
+    const formsStore = useFormsStore()
+    const workspacesStore = useWorkspacesStore()
+    return {
+      authStore,
+      formsStore,
+      workspacesStore,
+      user : computed(() => authStore.user)
+    }
+  },
+
   data: () => ({
     appName: window.config.appName
   }),
@@ -151,12 +166,12 @@ export default {
     helpUrl: () => window.config.links.help_url,
     form () {
       if (this.$route.name && this.$route.name.startsWith('forms.show_public')) {
-        return this.$store.getters['open/forms/getBySlug'](this.$route.params.slug)
+        return this.formsStore.getBySlug(this.$route.params.slug)
       }
       return null
     },
     workspace () {
-      return this.$store.getters['open/workspaces/getCurrent']()
+      return this.workspacesStore.getCurrent()
     },
     paidPlansEnabled () {
       return window.config.paid_plans_enabled
@@ -182,9 +197,6 @@ export default {
     isIframe () {
       return window.location !== window.parent.location || window.frameElement
     },
-    ...mapGetters({
-      user: 'auth/user'
-    }),
     userOnboarded () {
       return this.user && this.user.workspaces_count > 0
     },
@@ -196,11 +208,11 @@ export default {
   methods: {
     async logout () {
       // Log out the user.
-      await this.$store.dispatch('auth/logout')
+      await this.authStore.logout()
 
       // Reset store
-      this.$store.dispatch('open/workspaces/resetState')
-      this.$store.dispatch('open/forms/resetState')
+      this.workspacesStore.resetState()
+      this.formsStore.resetState()
 
       // Redirect to login.
       this.$router.push({ name: 'login' })

resources/js/components/WorkspaceDropdown.vue

@@ -41,8 +41,11 @@
 </template>
 
 <script>
+import { computed } from 'vue'
+import { useAuthStore } from '../stores/auth'
+import { useFormsStore } from '../stores/forms'
+import { useWorkspacesStore } from '../stores/workspaces'
 import Dropdown from './common/Dropdown.vue'
-import { mapGetters, mapState } from 'vuex'
 
 export default {
 
@@ -51,20 +54,26 @@ export default {
     Dropdown
   },
 
+  setup () {
+    const authStore = useAuthStore()
+    const formsStore = useFormsStore()
+    const workspacesStore = useWorkspacesStore()
+    return {
+      formsStore,
+      workspacesStore,
+      user : computed(() => authStore.user),
+      workspaces : computed(() => workspacesStore.content),
+      loading : computed(() => workspacesStore.loading)
+    }
+  },
+
   data: () => ({
     appName: window.config.appName
   }),
 
   computed: {
-    ...mapState({
-      workspaces: state => state['open/workspaces'].content,
-      loading: state => state['open/workspaces'].loading
-    }),
-    ...mapGetters({
-      user: 'auth/user'
-    }),
     workspace () {
-      return this.$store.getters['open/workspaces/getCurrent']()
+      return this.workspacesStore.getCurrent()
     }
   },
 
@@ -76,12 +85,12 @@ export default {
 
   methods: {
     switchWorkspace (workspace) {
-      this.$store.commit('open/workspaces/setCurrentId', workspace.id)
+      this.workspacesStore.setCurrentId(workspace.id)
       this.$refs.dropdown.close()
       if (this.$route.name !== 'home') {
         this.$router.push({ name: 'home' })
       }
-      this.$store.dispatch('open/forms/load', workspace.id)
+      this.formsStore.load(workspace.id)
     },
     isUrl (str) {
       try {

resources/js/components/common/Breadcrumb.vue

@@ -54,7 +54,8 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../../stores/auth';
 
 export default {
   name: 'Breadcrumb',
@@ -66,20 +67,22 @@ export default {
     path: { type: Array }
   },
 
+  setup () {
+    const authStore = useAuthStore()
+    return {
+      authenticated : computed(() => authStore.check)
+    }
+  },
+
   data () {
     return {
       displayHome: true
     }
   },
 
-  computed: {
-    ...mapGetters({
-      authenticated: 'auth/check'
-    })
-  },
+  computed: {},
 
-  mounted () {
-  },
+  mounted () {},
 
   methods: {}
 }

resources/js/components/common/ProTag.vue

@@ -37,8 +37,10 @@
 </template>
 
 <script>
+import { computed } from 'vue'
 import Modal from '../Modal.vue'
-import {mapGetters} from 'vuex'
+import { useAuthStore } from '../../stores/auth';
+import { useWorkspacesStore } from '../../stores/workspaces';
 import PricingTable from "../pages/pricing/PricingTable.vue";
 
 export default {
@@ -46,6 +48,15 @@ export default {
   components: {PricingTable, Modal},
   props: {},
 
+  setup () {
+    const authStore = useAuthStore()
+    const workspacesStore = useWorkspacesStore()
+    return {
+      user : computed(() => authStore.user),
+      currentWorkSpace : computed(() => workspacesStore.getCurrent())
+    }
+  },
+
   data() {
     return {
       showPremiumModal: false,
@@ -54,10 +65,6 @@ export default {
   },
 
   computed: {
-    ...mapGetters({
-      user: 'auth/user',
-      currentWorkSpace: 'open/workspaces/getCurrent',
-    }),
     shouldDisplayProTag() {
       if (!window.config.paid_plans_enabled) return false
       if (!this.user || !this.currentWorkSpace) return true

resources/js/components/forms/PhoneInput.vue

@@ -11,7 +11,7 @@
                 :data="countries"
                 :disabled="disabled || countries.length===1" :searchable="true" :search-keys="['name']" :option-key="'code'" :color="color"
                 :has-error="hasValidation && form.errors.has(name)"
-                :placeholder="'Select a country'" :uppercase-labels="true" :theme="theme" @input="onChangeCountryCode"
+                :placeholder="'Select a country'" :uppercase-labels="true" :theme="theme" @update:model-value="onChangeCountryCode"
       >
         <template #option="props">
           <div class="flex items-center space-x-2 hover:text-white">
@@ -29,7 +29,7 @@
       </v-select>
       <input v-model="inputVal" type="text" class="inline-flex-grow !border-l-0 !rounded-l-none" :disabled="disabled"
             :class="[theme.default.input, { '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200': disabled }]"
-            :placeholder="placeholder" :style="inputStyle" @input="onInput"
+            :placeholder="placeholder" :style="inputStyle" @update:model-value="onInput"
       >
     </div>
 

resources/js/components/forms/components/InputWrapper.vue

@@ -22,7 +22,7 @@
       </input-help>
     </slot>
     <slot name="error">
-      <has-error v-if="hasValidation" :form="form" :field="name" />
+      <has-error v-if="hasValidation && form" :form="form" :field="name" />
     </slot>
   </div>
 </template>

resources/js/components/open/components/RecordOperations.vue

@@ -16,8 +16,6 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
-import store from '~/store'
 import axios from 'axios'
 
 export default {

resources/js/components/open/forms/OpenForm.vue

@@ -62,6 +62,9 @@
 <script>
 import axios from 'axios'
 import Form from 'vform'
+import { computed } from 'vue'
+import { useRecordsStore } from '../../../stores/records'
+import { useWorkingFormStore } from '../../../stores/working_form'
 import OpenFormButton from './OpenFormButton.vue'
 import clonedeep from 'clone-deep'
 import FormLogicPropertyResolver from '../../../forms/FormLogicPropertyResolver.js'
@@ -100,6 +103,16 @@ export default {
     },
     adminPreview: { type: Boolean, default: false } // If used in FormEditorPreview
   },
+
+  setup () {
+    const recordsStore = useRecordsStore()
+    const workingFormStore = useWorkingFormStore()
+    return {
+      recordsStore,
+      workingFormStore
+    }
+  },
+
   data () {
     return {
       dataForm: null,
@@ -154,8 +167,8 @@ export default {
             newFields.push(...group)
           }
         })
-        // set the properties on working_form vuex
-        this.$store.commit('open/working_form/setProperties', newFields)
+        // set the properties on working_form store
+        this.workingFormStore.setProperties(newFields)
       }
     },
     /**
@@ -293,12 +306,12 @@ export default {
       if (!this.form || !this.form.editable_submissions || !this.form.submission_id) {
         return null
       }
-      await this.$store.dispatch('open/records/loadRecord',
+      await this.recordsStore.loadRecord(
         axios.get('/api/forms/' + this.form.slug + '/submissions/' + this.form.submission_id).then((response) => {
           return { submission_id: this.form.submission_id, ...response.data.data }
         })
       )
-      return this.$store.getters['open/records/getById'](this.form.submission_id)
+      return this.recordsStore.getById(this.form.submission_id)
     },
     async initForm () {
       if (this.isPublicFormPage && this.form.editable_submissions) {

resources/js/components/open/forms/OpenFormField.vue

@@ -78,9 +78,10 @@
 </template>
 
 <script>
+import { computed } from 'vue'
+import { useWorkingFormStore } from '../../../stores/working_form';
 import FormLogicPropertyResolver from '../../../forms/FormLogicPropertyResolver.js'
 import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key.js'
-import {mapState} from "vuex";
 
 export default {
   name: 'OpenFormField',
@@ -113,15 +114,21 @@ export default {
     },
     adminPreview: {type: Boolean, default: false} // If used in FormEditorPreview
   },
+
+  setup () {
+    const workingFormStore = useWorkingFormStore()
+    return {
+      workingFormStore,
+      selectedFieldIndex : computed(() => workingFormStore.selectedFieldIndex),
+      showEditFieldSidebar : computed(() => workingFormStore.showEditFieldSidebar)
+    }
+  },
+
   data() {
     return {}
   },
 
   computed: {
-    ...mapState({
-      selectedFieldIndex: state => state['open/working_form'].selectedFieldIndex,
-      showEditFieldSidebar: state => state['open/working_form'].showEditFieldSidebar
-    }),
     fieldComponents() {
       return {
         text: 'TextInput',
@@ -214,10 +221,10 @@ export default {
 
   methods: {
     editFieldOptions() {
-      this.$store.commit('open/working_form/openSettingsForField', this.field)
+      this.workingFormStore.openSettingsForField(this.field)
     },
     openAddFieldSidebar() {
-      this.$store.commit('open/working_form/openAddFieldSidebar', this.field)
+      this.workingFormStore.openAddFieldSidebar(this.field)
     },
     /**
      * Get the right input component for the field/options combination

resources/js/components/open/forms/components/AdvancedFormUrlSettings.vue

@@ -13,12 +13,12 @@
                          label="Hide Form Title"
                          :disabled="form.hide_title===true"
                          :help="hideTitleHelp"
-                         @input="onChangeHideTitle"
+                         @update:model-value="onChangeHideTitle"
     />
     <toggle-switch-input :value="value.auto_submit" name="auto_submit" class="mt-4"
                          label="Auto Submit Form"
                          help="Form will auto submit immediate after open URL"
-                         @input="onChangeAutoSubmit"
+                         @update:model-value="onChangeAutoSubmit"
     />
   </collapse>
 </template>

resources/js/components/open/forms/components/FormEditor.vue

@@ -85,7 +85,11 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../../../../stores/auth';
+import { useFormsStore } from '../../../../stores/forms';
+import { useWorkingFormStore } from '../../../../stores/working_form';
+import { useWorkspacesStore } from '../../../../stores/workspaces';
 import AddFormBlockSidebar from './form-components/AddFormBlockSidebar.vue'
 import FormFieldEditSidebar from '../fields/FormFieldEditSidebar.vue'
 import FormErrorModal from './form-components/FormErrorModal.vue'
@@ -143,6 +147,19 @@ export default {
     }
   },
 
+  setup () {
+    const authStore = useAuthStore()
+    const formsStore = useFormsStore()
+    const workingFormStore = useWorkingFormStore()
+    const workspacesStore = useWorkspacesStore()
+    return {
+      formsStore,
+      workingFormStore,
+      workspacesStore,
+      user : computed(() => authStore.user)
+    }
+  },
+
   data () {
     return {
       showFormErrorModal: false,
@@ -153,23 +170,20 @@ export default {
   },
 
   computed: {
-    ...mapGetters({
-      user: 'auth/user'
-    }),
     form: {
       get () {
-        return this.$store.state['open/working_form'].content
+        return this.workingFormStore.content
       },
       /* We add a setter */
       set (value) {
-        this.$store.commit('open/working_form/set', value)
+        this.workingFormStore.set(value)
       }
     },
     createdForm () {
-      return this.$store.getters['open/forms/getById'](this.createdFormId)
+      return this.formsStore.getById(this.createdFormId)
     },
     workspace () {
-      return this.$store.getters['open/workspaces/getCurrent']()
+      return this.workspacesStore.getCurrent()
     },
     steps () {
       return [
@@ -245,7 +259,7 @@ export default {
       this.validationErrorResponse = null
       this.form.put('/api/open/forms/{id}/'.replace('{id}', this.form.id)).then((response) => {
         const data = response.data
-        this.$store.commit('open/forms/addOrUpdate', data.form)
+        this.formsStore.addOrUpdate(data.form)
         this.$emit('on-save')
         this.$router.push({ name: 'forms.show', params: { slug: this.form.slug } })
         this.$logEvent('form_saved', { form_id: this.form.id, form_slug: this.form.slug })
@@ -266,7 +280,7 @@ export default {
 
       this.updateFormLoading = true
       this.form.post('/api/open/forms').then((response) => {
-        this.$store.commit('open/forms/addOrUpdate', response.data.form)
+        this.formsStore.addOrUpdate(response.data.form)
         this.$emit('on-save')
         this.createdFormId = response.data.form.id
 

resources/js/components/open/forms/components/FormFieldsEditor.vue

@@ -166,6 +166,8 @@
 </template>
 
 <script>
+import { computed } from 'vue'
+import { useWorkingFormStore } from '../../../../stores/working_form'
 import draggable from 'vuedraggable'
 import ProTag from '../../../common/ProTag.vue'
 import clonedeep from 'clone-deep'
@@ -182,6 +184,13 @@ export default {
     EditableDiv
   },
 
+  setup () {
+    const workingFormStore = useWorkingFormStore()
+    return {
+      workingFormStore
+    }
+  },
+
   data () {
     return {
       formFields: [],
@@ -192,11 +201,11 @@ export default {
   computed: {
     form: {
       get () {
-        return this.$store.state['open/working_form'].content
+        return this.workingFormStore.content
       },
       /* We add a setter */
       set (value) {
-        this.$store.commit('open/working_form/set', value)
+        this.workingFormStore.set(value)
       }
     }
   },
@@ -313,7 +322,7 @@ export default {
       return type
     },
     editOptions (index) {
-      this.$store.commit('open/working_form/openSettingsForField', index)
+      this.workingFormStore.openSettingsForField(index)
     },
     removeBlock (blockIndex) {
       const newFields = clonedeep(this.formFields)
@@ -322,10 +331,10 @@ export default {
       this.closeSidebar()
     },
     closeSidebar () {
-      this.$store.commit('open/working_form/closeEditFieldSidebar')
+      this.workingFormStore.closeEditFieldSidebar()
     },
     openAddFieldSidebar () {
-      this.$store.commit('open/working_form/openAddFieldSidebar', null)
+      this.workingFormStore.openAddFieldSidebar(null)
     }
   }
 }

resources/js/components/open/forms/components/FormSubmissions.vue

@@ -25,7 +25,7 @@
           </h4>
           <div v-for="field in properties" :key="field.id" class="p-2 border">
             {{ field.name }}
-            <v-switch v-model="displayColumns[field.id]" class="float-right" @input="onChangeDisplayColumns" />
+            <v-switch v-model="displayColumns[field.id]" class="float-right" @update:model-value="onChangeDisplayColumns" />
           </div>
         </template>
         <template v-if="removed_properties.length > 0">
@@ -34,7 +34,7 @@
           </h4>
           <div v-for="field in removed_properties" :key="field.id" class="p-2 border">
             {{ field.name }}
-            <v-switch v-model="displayColumns[field.id]" class="float-right" @input="onChangeDisplayColumns" />
+            <v-switch v-model="displayColumns[field.id]" class="float-right" @update:model-value="onChangeDisplayColumns" />
           </div>
         </template>
       </div>
@@ -83,6 +83,7 @@
 import axios from 'axios'
 import Fuse from 'fuse.js'
 import Form from 'vform'
+import { useWorkingFormStore } from '../../../../stores/working_form'
 import ScrollShadow from '../../../common/ScrollShadow.vue'
 import OpenTable from '../../tables/OpenTable.vue'
 import clonedeep from 'clone-deep'
@@ -92,6 +93,15 @@ export default {
   name: 'FormSubmissions',
   components: { ScrollShadow, OpenTable, VSwitch },
   props: {},
+
+  setup () {
+    const workingFormStore = useWorkingFormStore()
+    return {
+      workingFormStore
+    }
+  },
+
+
   data () {
     return {
       formInitDone: false,
@@ -111,10 +121,10 @@ export default {
   computed: {
     form: {
       get () {
-        return this.$store.state['open/working_form'].content
+        return this.workingFormStore.content
       },
       set (value) {
-        this.$store.commit('open/working_form/set', value)
+        this.workingFormStore.set(value)
       }
     },
     exportUrl () {

resources/js/components/open/forms/components/form-components/AddFormBlockSidebar.vue

@@ -30,7 +30,7 @@
             <div class="mx-auto">
               <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor" stroke-width="2" v-html="block.icon"
-              />
+              ></svg>
             </div>
             <p class="w-full text-xs text-gray-500 uppercase text-center font-semibold mt-1">
               {{ block.title }}
@@ -50,7 +50,7 @@
             <div class="mx-auto">
               <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor" stroke-width="2" v-html="block.icon"
-              />
+              ></svg>
             </div>
             <p class="w-full text-xs text-gray-500 uppercase text-center font-semibold mt-1">
               {{ block.title }}
@@ -63,14 +63,26 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
 import Form from 'vform'
 import clonedeep from 'clone-deep'
+import { computed } from 'vue'
+import { useWorkingFormStore } from '../../../../../stores/working_form'
 
 export default {
   name: 'AddFormBlockSidebar',
   components: {},
   props: {},
+
+  setup () {
+    const workingFormStore = useWorkingFormStore()
+    return {
+      workingFormStore,
+      selectedFieldIndex : computed(() => workingFormStore.selectedFieldIndex),
+      showAddFieldSidebar : computed(() => workingFormStore.showAddFieldSidebar)
+    }
+  },
+
+
   data () {
     return {
       blockForm: null,
@@ -162,17 +174,13 @@ export default {
   },
 
   computed: {
-    ...mapState({
-      selectedFieldIndex: state => state['open/working_form'].selectedFieldIndex,
-      showAddFieldSidebar: state => state['open/working_form'].showAddFieldSidebar
-    }),
     form: {
       get () {
-        return this.$store.state['open/working_form'].content
+        return this.workingFormStore.content
       },
       /* We add a setter */
       set (value) {
-        this.$store.commit('open/working_form/set', value)
+        this.workingFormStore.set(value)
       }
     },
     showSidebar () {
@@ -209,7 +217,7 @@ export default {
 
   methods: {
     closeSidebar () {
-      this.$store.commit('open/working_form/closeAddFieldSidebar')
+      this.workingFormStore.closeAddFieldSidebar()
     },
     reset () {
       this.blockForm = new Form({
@@ -231,12 +239,12 @@ export default {
         const newFields = clonedeep(this.form.properties)
         newFields.push(newBlock)
         this.form.properties = newFields
-        this.$store.commit('open/working_form/openSettingsForField', this.form.properties.length - 1)
+        this.workingFormStore.openSettingsForField(this.form.properties.length - 1)
       } else {
         const newFields = clonedeep(this.form.properties)
         newFields.splice(this.selectedFieldIndex + 1, 0, newBlock)
         this.form.properties = newFields
-        this.$store.commit('open/working_form/openSettingsForField', this.selectedFieldIndex + 1)
+        this.workingFormStore.openSettingsForField(this.selectedFieldIndex + 1)
       }
       this.reset()
     },

resources/js/components/open/forms/components/form-components/FormAboutSubmission.vue

@@ -129,6 +129,7 @@
 </template>
 
 <script>
+import { useWorkingFormStore } from '../../../../../stores/working_form'
 import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 import ProTag from '../../../../common/ProTag.vue'
 import VTransition from '../../../../common/transitions/VTransition.vue'
@@ -136,6 +137,12 @@ import VTransition from '../../../../common/transitions/VTransition.vue'
 export default {
   components: {EditorOptionsPanel, ProTag, VTransition},
   props: {},
+  setup () {
+    const workingFormStore = useWorkingFormStore()
+    return {
+      workingFormStore
+    }
+  },
   data () {
     return {
       submissionOptions: {}
@@ -145,11 +152,11 @@ export default {
   computed: {
     form: {
       get () {
-        return this.$store.state['open/working_form'].content
+        return this.workingFormStore.content
       },
       /* We add a setter */
       set (value) {
-        this.$store.commit('open/working_form/set', value)
+        this.workingFormStore.set(value)
       }
     },
     /**

resources/js/components/open/forms/components/form-components/FormAccess.vue

@@ -38,11 +38,18 @@
 </template>
 
 <script>
+import { useWorkingFormStore } from '../../../../../stores/working_form'
 import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 
 export default {
   components: { EditorOptionsPanel },
   props: {},
+  setup () {
+    const workingFormStore = useWorkingFormStore()
+    return {
+      workingFormStore
+    }
+  },
   data () {
     return {
     }
@@ -50,11 +57,11 @@ export default {
   computed: {
     form: {
       get () {
-        return this.$store.state['open/working_form'].content
+        return this.workingFormStore.content
       },
       /* We add a setter */
       set (value) {
-        this.$store.commit('open/working_form/set', value)
+        this.workingFormStore.set(value)
       }
     }
   },

resources/js/components/open/forms/components/form-components/FormCustomCode.vue

@@ -17,12 +17,18 @@
 </template>
 
 <script>
+import { useWorkingFormStore } from '../../../../../stores/working_form'
 import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 import CodeInput from '../../../../forms/CodeInput.vue'
 
 export default {
   components: { EditorOptionsPanel, CodeInput },
-  props: {
+  props: {},
+  setup () {
+    const workingFormStore = useWorkingFormStore()
+    return {
+      workingFormStore
+    }
   },
   data () {
     return {
@@ -32,11 +38,11 @@ export default {
   computed: {
     form: {
       get () {
-        return this.$store.state['open/working_form'].content
+        return this.workingFormStore.content
       },
       /* We add a setter */
       set (value) {
-        this.$store.commit('open/working_form/set', value)
+        this.workingFormStore.set(value)
       }
     }
   },

resources/js/components/open/forms/components/form-components/FormCustomSeo.vue

@@ -23,11 +23,18 @@
 </template>
 
 <script>
+import { useWorkingFormStore } from '../../../../../stores/working_form'
 import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 
 export default {
   components: { EditorOptionsPanel },
   props: {},
+  setup () {
+    const workingFormStore = useWorkingFormStore()
+    return {
+      workingFormStore
+    }
+  },
   data () {
     return {
     }
@@ -35,11 +42,11 @@ export default {
   computed: {
     form: {
       get () {
-        return this.$store.state['open/working_form'].content
+        return this.workingFormStore.content
       },
       /* We add a setter */
       set (value) {
-        this.$store.commit('open/working_form/set', value)
+        this.workingFormStore.set(value)
       }
     }
   },

resources/js/components/open/forms/components/form-components/FormCustomization.vue

@@ -71,7 +71,7 @@
     />
     <toggle-switch-input name="confetti_on_submission" :form="form" class="mt-4"
                          label="Confetti on successful submisison"
-                         @input="onChangeConfettiOnSubmission"
+                         @update:model-value="onChangeConfettiOnSubmission"
     />
     <toggle-switch-input name="auto_save" :form="form"
                          label="Auto save form response"
@@ -81,6 +81,7 @@
 </template>
 
 <script>
+import { useWorkingFormStore } from '../../../../../stores/working_form'
 import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 import ProTag from '../../../../common/ProTag.vue'
 
@@ -88,6 +89,12 @@ export default {
   components: { EditorOptionsPanel, ProTag },
   props: {
   },
+  setup () {
+    const workingFormStore = useWorkingFormStore()
+    return {
+      workingFormStore
+    }
+  },
   data () {
     return {
       isMounted: false
@@ -97,11 +104,11 @@ export default {
   computed: {
     form: {
       get () {
-        return this.$store.state['open/working_form'].content
+        return this.workingFormStore.content
       },
       /* We add a setter */
       set (value) {
-        this.$store.commit('open/working_form/set', value)
+        this.workingFormStore.set(value)
       }
     }
   },

resources/js/components/open/forms/components/form-components/FormEditorPreview.vue

@@ -59,12 +59,18 @@
 </template>
 
 <script>
+import { useWorkingFormStore } from '../../../../../stores/working_form'
 import VSwitch from '../../../../forms/components/VSwitch.vue'
 import OpenCompleteForm from '../../OpenCompleteForm.vue'
 
 export default {
   components: { OpenCompleteForm, VSwitch },
-  props: {
+  props: {},
+  setup () {
+    const workingFormStore = useWorkingFormStore()
+    return {
+      workingFormStore
+    }
   },
   data () {
     return {
@@ -75,11 +81,11 @@ export default {
   computed: {
     form: {
       get () {
-        return this.$store.state['open/working_form'].content
+        return this.workingFormStore.content
       },
       /* We add a setter */
       set (value) {
-        this.$store.commit('open/working_form/set', value)
+        this.workingFormStore.set(value)
       }
     },
     creating () { // returns true if we are creating a form

resources/js/components/open/forms/components/form-components/FormInformation.vue

@@ -66,14 +66,27 @@
 </template>
 
 <script>
+import { computed } from 'vue'
+import clonedeep from 'clone-deep'
+import { useFormsStore } from '../../../../../stores/forms'
+import { useWorkingFormStore } from '../../../../../stores/working_form'
 import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 import SelectInput from '../../../../forms/SelectInput.vue'
-import { mapState } from 'vuex'
-import clonedeep from 'clone-deep'
 
 export default {
   components: { SelectInput, EditorOptionsPanel },
   props: {},
+
+  setup () {
+    const formsStore = useFormsStore()
+    const workingFormStore = useWorkingFormStore()
+    return {
+      formsStore,
+      workingFormStore,
+      forms : computed(() => formsStore.content)
+    }
+  },
+
   data () {
     return {
       showCopyFormSettingsModal: false,
@@ -106,20 +119,17 @@ export default {
         }
       })
     },
-    ...mapState({
-      forms: state => state['open/forms'].content
-    }),
     form: {
       get () {
-        return this.$store.state['open/working_form'].content
+        return this.workingFormStore.content
       },
       /* We add a setter */
       set (value) {
-        this.$store.commit('open/working_form/set', value)
+        this.workingFormStore.set(value)
       }
     },
     allTagsOptions () {
-      return this.$store.getters['open/forms/getAllTags'].map((tagname) => {
+      return this.formsStore.getAllTags.map((tagname) => {
         return {
           name: tagname,
           value: tagname

resources/js/components/open/forms/components/form-components/FormNotifications.vue

@@ -31,6 +31,7 @@
 </template>
 
 <script>
+import { useWorkingFormStore } from '../../../../../stores/working_form'
 import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 import FormNotificationsOption from './components/FormNotificationsOption.vue'
 import FormNotificationsSlack from './components/FormNotificationsSlack.vue'
@@ -40,7 +41,12 @@ import FormNotificationsWebhook from './components/FormNotificationsWebhook.vue'
 
 export default {
   components: { FormNotificationsSubmissionConfirmation, FormNotificationsSlack, FormNotificationsDiscord, FormNotificationsOption, EditorOptionsPanel, FormNotificationsWebhook },
-  props: {
+  props: {},
+  setup () {
+    const workingFormStore = useWorkingFormStore()
+    return {
+      workingFormStore
+    }
   },
   data () {
     return {
@@ -50,11 +56,11 @@ export default {
   computed: {
     form: {
       get () {
-        return this.$store.state['open/working_form'].content
+        return this.workingFormStore.content
       },
       /* We add a setter */
       set (value) {
-        this.$store.commit('open/working_form/set', value)
+        this.workingFormStore.set(value)
       }
     },
     zapierUrl: () => window.config.links.zapier_integration

resources/js/components/open/forms/components/form-components/FormSecurityPrivacy.vue

@@ -17,11 +17,17 @@
 </template>
 
 <script>
+import { useWorkingFormStore } from '../../../../../stores/working_form'
 import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 
 export default {
   components: { EditorOptionsPanel },
-  props: {
+  props: {},
+  setup () {
+    const workingFormStore = useWorkingFormStore()
+    return {
+      workingFormStore
+    }
   },
   data () {
     return {
@@ -30,11 +36,11 @@ export default {
   computed: {
     form: {
       get () {
-        return this.$store.state['open/working_form'].content
+        return this.workingFormStore.content
       },
       /* We add a setter */
       set (value) {
-        this.$store.commit('open/working_form/set', value)
+        this.workingFormStore.set(value)
       }
     }
   },

resources/js/components/open/forms/components/form-components/FormStructure.vue

@@ -11,12 +11,18 @@
 </template>
 
 <script>
+import { useWorkingFormStore } from '../../../../../stores/working_form'
 import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 import FormFieldsEditor from '../FormFieldsEditor.vue'
 
 export default {
   components: { EditorOptionsPanel, FormFieldsEditor },
-  props: {
+  props: {},
+  setup () {
+    const workingFormStore = useWorkingFormStore()
+    return {
+      workingFormStore
+    }
   },
   data () {
     return {
@@ -26,11 +32,11 @@ export default {
   computed: {
     form: {
       get () {
-        return this.$store.state['open/working_form'].content
+        return this.workingFormStore.content
       },
       /* We add a setter */
       set (value) {
-        this.$store.commit('open/working_form/set', value)
+        this.workingFormStore.set(value)
       }
     }
   }

resources/js/components/open/forms/components/form-components/components/FormNotificationsDiscord.vue

@@ -46,12 +46,19 @@
 </template>
 
 <script>
+import { useWorkingFormStore } from '../../../../../../stores/working_form'
 import ProTag from '../../../../../common/ProTag.vue'
 import FormNotificationsMessageActions from './FormNotificationsMessageActions.vue'
 
 export default {
   components: { ProTag, FormNotificationsMessageActions },
   props: {},
+  setup () {
+    const workingFormStore = useWorkingFormStore()
+    return {
+      workingFormStore
+    }
+  },
   data () {
     return {
       showModal: false
@@ -61,11 +68,11 @@ export default {
   computed: {
     form: {
       get () {
-        return this.$store.state['open/working_form'].content
+        return this.workingFormStore.content
       },
       /* We add a setter */
       set (value) {
-        this.$store.commit('open/working_form/set', value)
+        this.workingFormStore.set(value)
       }
     }
   },

resources/js/components/open/forms/components/form-components/components/FormNotificationsOption.vue

@@ -50,11 +50,18 @@
 </template>
 
 <script>
+import { useWorkingFormStore } from '../../../../../../stores/working_form'
 import ProTag from '../../../../../common/ProTag.vue'
 
 export default {
   components: { ProTag },
   props: {},
+  setup () {
+    const workingFormStore = useWorkingFormStore()
+    return {
+      workingFormStore
+    }
+  },
   data () {
     return {
       showModal: false
@@ -64,11 +71,11 @@ export default {
   computed: {
     form: {
       get () {
-        return this.$store.state['open/working_form'].content
+        return this.workingFormStore.content
       },
       /* We add a setter */
       set (value) {
-        this.$store.commit('open/working_form/set', value)
+        this.workingFormStore.set(value)
       }
     },
     replayToEmailField () {

resources/js/components/open/forms/components/form-components/components/FormNotificationsSlack.vue

@@ -47,12 +47,19 @@
 </template>
 
 <script>
+import { useWorkingFormStore } from '../../../../../../stores/working_form'
 import ProTag from '../../../../../common/ProTag.vue'
 import FormNotificationsMessageActions from './FormNotificationsMessageActions.vue'
 
 export default {
   components: { ProTag, FormNotificationsMessageActions },
   props: {},
+  setup () {
+    const workingFormStore = useWorkingFormStore()
+    return {
+      workingFormStore
+    }
+  },
   data () {
     return {
       showModal: false
@@ -62,11 +69,11 @@ export default {
   computed: {
     form: {
       get () {
-        return this.$store.state['open/working_form'].content
+        return this.workingFormStore.content
       },
       /* We add a setter */
       set (value) {
-        this.$store.commit('open/working_form/set', value)
+        this.workingFormStore.set(value)
       }
     }
   },

resources/js/components/open/forms/components/form-components/components/FormNotificationsSubmissionConfirmation.vue

@@ -62,11 +62,18 @@
 </template>
 
 <script>
+import { useWorkingFormStore } from '../../../../../../stores/working_form'
 import ProTag from '../../../../../common/ProTag.vue'
 
 export default {
   components: { ProTag },
   props: {},
+  setup () {
+    const workingFormStore = useWorkingFormStore()
+    return {
+      workingFormStore
+    }
+  },
   data () {
     return {
       showModal: false
@@ -76,11 +83,11 @@ export default {
   computed: {
     form: {
       get () {
-        return this.$store.state['open/working_form'].content
+        return this.workingFormStore.content
       },
       /* We add a setter */
       set (value) {
-        this.$store.commit('open/working_form/set', value)
+        this.workingFormStore.set(value)
       }
     },
     emailSubmissionConfirmationField () {

resources/js/components/open/forms/components/form-components/components/FormNotificationsWebhook.vue

@@ -43,11 +43,18 @@
 </template>
 
 <script>
+import { useWorkingFormStore } from '../../../../../../stores/working_form'
 import ProTag from '../../../../../common/ProTag.vue'
 
 export default {
   components: { ProTag },
   props: {},
+  setup () {
+    const workingFormStore = useWorkingFormStore()
+    return {
+      workingFormStore
+    }
+  },
   data () {
     return {
       showModal: false
@@ -57,11 +64,11 @@ export default {
   computed: {
     form: {
       get () {
-        return this.$store.state['open/working_form'].content
+        return this.workingFormStore.content
       },
       /* We add a setter */
       set (value) {
-        this.$store.commit('open/working_form/set', value)
+        this.workingFormStore.set(value)
       }
     }
   },

resources/js/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue

@@ -38,7 +38,7 @@
                   :multiple="true" class="mt-1" placeholder="Actions..."
                   help="Action(s) triggerred when above conditions are true"
                   :options="actionOptions"
-                  @input="onActionInput"
+                  @update:model-value="onActionInput"
     />
 
     <modal :show="showCopyFormModal" @close="showCopyFormModal = false">

resources/js/components/open/forms/components/templates/FormTemplateModal.vue

@@ -72,10 +72,11 @@
 </template>
 
 <script>
-import Form from 'vform'
-import store from '~/store'
-import { mapState, mapGetters } from 'vuex'
 import axios from 'axios'
+import Form from 'vform'
+import { computed } from 'vue'
+import { useAuthStore } from '../../../../../stores/auth'
+import { useTemplatesStore } from '../../../../../stores/templates'
 import QuestionsEditor from './QuestionsEditor.vue'
 
 export default {
@@ -87,6 +88,18 @@ export default {
     template: { type: Object, required: false, default: () => {} }
   },
 
+  setup () {
+    const authStore = useAuthStore()
+    const templatesStore = useTemplatesStore()
+    return {
+      templatesStore,
+      user : computed(() => authStore.user),
+      templates : computed(() => templatesStore.content),
+      industries : computed(() => templatesStore.industries),
+      types : computed(() => templatesStore.types)
+    }
+  },
+
   data: () => ({
     templateForm: null
   }),
@@ -104,18 +117,10 @@ export default {
       related_templates: null,
       questions: []
     })
-    store.dispatch('open/templates/loadIfEmpty')
+    this.templatesStore.loadIfEmpty()
   },
 
   computed: {
-    ...mapState({
-      templates: state => state['open/templates'].content,
-      industries: state => state['open/templates'].industries,
-      types: state => state['open/templates'].types
-    }),
-    ...mapGetters({
-      user: 'auth/user'
-    }),
     typesOptions () {
       return Object.values(this.types).map((type) => {
         return {
@@ -156,7 +161,7 @@ export default {
         if (response.data.message) {
           this.alertSuccess(response.data.message)
         }
-        this.$store.commit('open/templates/addOrUpdate', response.data.data)
+        this.templatesStore.addOrUpdate(response.data.data)
         this.$emit('close')
       })
     },
@@ -166,7 +171,7 @@ export default {
         if (response.data.message) {
           this.alertSuccess(response.data.message)
         }
-        this.$store.commit('open/templates/addOrUpdate', response.data.data)
+        this.templatesStore.addOrUpdate(response.data.data)
         this.$emit('close')
       })
     },
@@ -177,7 +182,7 @@ export default {
           this.alertSuccess(response.data.message)
         }
         this.$router.push({ name: 'templates' })
-        this.$store.commit('open/templates/remove', this.template)
+        this.templatesStore.remove(this.template)
         this.$emit('close')
       })
     }

resources/js/components/open/forms/fields/FormFieldEditSidebar.vue

@@ -70,8 +70,9 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { computed } from 'vue'
 import clonedeep from 'clone-deep'
+import { useWorkingFormStore } from '../../../../stores/working_form'
 import ChangeFieldType from './components/ChangeFieldType.vue'
 import FieldOptions from './components/FieldOptions.vue'
 import BlockOptions from './components/BlockOptions.vue'
@@ -80,6 +81,14 @@ export default {
   name: 'FormFieldEditSidebar',
   components: { ChangeFieldType, FieldOptions, BlockOptions },
   props: {},
+  setup () {
+    const workingFormStore = useWorkingFormStore()
+    return {
+      workingFormStore,
+      selectedFieldIndex : computed(() => workingFormStore.selectedFieldIndex),
+      showEditFieldSidebar : computed(() => workingFormStore.showEditFieldSidebar)
+    }
+  },
   data () {
     return {
 
@@ -87,17 +96,13 @@ export default {
   },
 
   computed: {
-    ...mapState({
-      selectedFieldIndex: state => state['open/working_form'].selectedFieldIndex,
-      showEditFieldSidebar: state => state['open/working_form'].showEditFieldSidebar
-    }),
     form: {
       get () {
-        return this.$store.state['open/working_form'].content
+        return this.workingFormStore.content
       },
       /* We add a setter */
       set (value) {
-        this.$store.commit('open/working_form/set', value)
+        this.workingFormStore.set(value)
       }
     },
     field () {
@@ -145,7 +150,7 @@ export default {
       this.closeSidebar()
     },
     closeSidebar () {
-      this.$store.commit('open/working_form/closeEditFieldSidebar')
+      this.workingFormStore.closeEditFieldSidebar()
     },
     generateUUID () {
       let d = new Date().getTime()// Timestamp

resources/js/components/open/forms/fields/components/FieldOptions.vue

@@ -186,7 +186,7 @@
       <text-area-input v-model="optionsText" :name="field.id+'_options_text'" class="mt-3"
                        label="Set selection options"
                        help="Add one option per line"
-                       @input="onFieldOptionsChange"
+                       @update:model-value="onFieldOptionsChange"
       />
       <v-checkbox v-model="field.allow_creation"
                   name="allow_creation" help="" @update:model-value="onFieldAllowCreationChange"

resources/js/components/open/tables/OpenTable.vue

@@ -78,6 +78,7 @@
 </template>
 
 <script>
+import { useWorkingFormStore } from '../../../stores/working_form'
 import OpenText from './components/OpenText.vue'
 import OpenUrl from './components/OpenUrl.vue'
 import OpenSelect from './components/OpenSelect.vue'
@@ -119,6 +120,13 @@ export default {
     }
   },
 
+  setup () {
+    const workingFormStore = useWorkingFormStore()
+    return {
+      workingFormStore
+    }
+  },
+
   data () {
     return {
       tableHash: null,
@@ -129,10 +137,11 @@ export default {
   computed: {
     form: {
       get () {
-        return this.$store.state['open/working_form'].content
+        return this.workingFormStore.content
       },
+      /* We add a setter */
       set (value) {
-        this.$store.commit('open/working_form/set', value)
+        this.workingFormStore.set(value)
       }
     },
     hasActions () {

resources/js/components/pages/OpenFormFooter.vue

@@ -31,18 +31,23 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../../stores/auth'
 
 export default {
+  setup () {
+    const authStore = useAuthStore()
+    return {
+      user : computed(() => authStore.user)
+    }
+  },
+
   data: () => ({
     appName: window.config.appName,
     currYear: new Date().getFullYear(),
   }),
 
   computed: {
-    ...mapGetters({
-      user: 'auth/user'
-    }),
     helpUrl: () => window.config.links.help_url,
     githubUrl: () => window.config.links.github_url,
     forumUrl: () => window.config.links.github_forum_url,

resources/js/components/pages/StopImpersonation.vue

@@ -24,28 +24,34 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../../stores/auth';
+import { useWorkspacesStore } from '../../stores/workspaces';
 
 export default {
+  setup () {
+    const authStore = useAuthStore()
+    const workspacesStore = useWorkspacesStore()
+    return {
+      authStore,
+      workspacesStore,
+      isImpersonating : computed(() => authStore.isImpersonating),
+    }
+  },
+
   data: () => ({
     loading: false
   }),
 
-  computed: {
-    ...mapGetters({
-      isImpersonating: 'auth/isImpersonating'
-    })
-  },
+  computed: {},
 
-  mounted () {
-  },
+  mounted () {},
 
   methods: {
     reverseImpersonation () {
       this.loading = true
-      this.$store.dispatch('auth/stopImpersonating')
-        .then(() => {
-          this.$store.commit('open/workspaces/set', [])
+      this.authStore.stopImpersonating().then(() => {
+          this.workspacesStore.set([])
           this.$router.push({ name: 'settings.admin' })
           this.loading = false
         })

resources/js/components/pages/forms/NewFeatures.vue

@@ -62,14 +62,22 @@
 </template>
 
 <script>
+import { computed } from 'vue'
 import axios from 'axios'
-import { mapGetters } from 'vuex'
+import { useAuthStore } from '../../../stores/auth';
 import VTransition from '../../common/transitions/VTransition.vue'
 
 export default {
   components: { VTransition },
   props: {},
 
+  setup () {
+    const authStore = useAuthStore()
+    return {
+      user : computed(() => authStore.user)
+    }
+  },
+
   data: () => ({
     changelogEntries: [],
     showNewFeatures: false
@@ -80,9 +88,6 @@ export default {
   },
 
   computed: {
-    ...mapGetters({
-      user: 'auth/user'
-    }),
     requestFeatureLink () {
       return window.config.links.feature_requests
     },

resources/js/components/pages/forms/show/ExtraMenu.vue

@@ -122,8 +122,10 @@
 </template>
 
 <script>
+import { computed } from 'vue'
 import axios from 'axios'
-import {mapGetters, mapState} from 'vuex'
+import { useAuthStore } from '../../../../stores/auth'
+import { useFormsStore } from '../../../../stores/forms'
 import Dropdown from '../../../common/Dropdown.vue'
 import FormTemplateModal from '../../../open/forms/components/templates/FormTemplateModal.vue'
 
@@ -135,6 +137,15 @@ export default {
       isMainPage: { type: Boolean, required: false, default: false }
     },
 
+    setup () {
+      const authStore = useAuthStore()
+      const formsStore = useFormsStore()
+      return {
+        formsStore,
+        user : computed(() => authStore.user)
+      }
+    },
+
     data: () => ({
       loadingDuplicate: false,
       loadingDelete: false,
@@ -143,9 +154,6 @@ export default {
     }),
 
     computed: {
-      ...mapGetters({
-        user: 'auth/user'
-      }),
       formEndpoint: () => '/api/open/forms/{id}',
     },
 
@@ -163,7 +171,7 @@ export default {
         if (this.loadingDuplicate) return
         this.loadingDuplicate = true
         axios.post(this.formEndpoint.replace('{id}', this.form.id) + '/duplicate').then((response) => {
-          this.$store.commit('open/forms/addOrUpdate', response.data.new_form)
+          this.formsStore.addOrUpdate(response.data.new_form)
           this.$router.push({name: 'forms.show', params: {slug: response.data.new_form.slug}})
           this.alertSuccess('Form was successfully duplicated.')
           this.loadingDuplicate = false
@@ -173,7 +181,7 @@ export default {
         if (this.loadingDelete) return
         this.loadingDelete = true
         axios.delete(this.formEndpoint.replace('{id}', this.form.id)).then(() => {
-          this.$store.commit('open/forms/remove', this.form)
+          this.formsStore.remove(this.form)
           this.$router.push({name: 'home'})
           this.alertSuccess('Form was deleted.')
           this.loadingDelete = false

resources/js/components/pages/forms/show/RegenerateFormLink.vue

@@ -72,7 +72,9 @@
 </template>
 
 <script>
+import { computed } from 'vue'
 import axios from 'axios'
+import { useFormsStore } from '../../../../stores/forms'
 
 export default {
   name: 'RegenerateFormLink',
@@ -81,6 +83,13 @@ export default {
     form: { type: Object, required: true }
   },
 
+  setup () {
+      const formsStore = useFormsStore()
+      return {
+        formsStore
+      }
+    },
+
   data: () => ({
     loadingNewLink: false,
     showGenerateFormLinkModal: false,
@@ -95,7 +104,7 @@ export default {
       if (this.loadingNewLink) return
       this.loadingNewLink = true
       axios.put(this.formEndpoint.replace('{id}', this.form.id) + '/regenerate-link/' + option).then((response) => {
-        this.$store.commit('open/forms/addOrUpdate', response.data.form)
+        this.formsStore.addOrUpdate(response.data.form)
         this.$router.push({name: 'forms.show', params: {slug: response.data.form.slug}})
         this.alertSuccess(response.data.message)
         this.loadingNewLink = false

resources/js/components/pages/pricing/CheckoutDetailsModal.vue

@@ -11,14 +11,14 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import TextInput from '../../forms/TextInput.vue'
-import Form from 'vform'
-import VButton from '../../common/Button.vue'
+import { computed } from 'vue'
 import axios from 'axios'
+import Form from 'vform'
+import { useAuthStore } from '../../../stores/auth'
+import TextInput from '../../forms/TextInput.vue'
+import VButton from '../../common/Button.vue'
 
 export default {
-
   components: { VButton, TextInput },
   props: {
     show: {
@@ -34,6 +34,14 @@ export default {
       default: true
     }
   },
+
+  setup () {
+    const authStore = useAuthStore()
+    return {
+      user : computed(() => authStore.user)
+    }
+  },
+
   data: () => ({
     form: new Form({
       name: '',
@@ -88,10 +96,6 @@ export default {
     }
   },
 
-  computed: {
-    ...mapGetters({
-      user: 'auth/user'
-    })
-  }
+  computed: {}
 }
 </script>

resources/js/components/pages/pricing/PricingTable.vue

@@ -107,7 +107,8 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../../../stores/auth'
 import axios from 'axios'
 import MonthlyYearlySelector from './MonthlyYearlySelector.vue'
 import CheckoutDetailsModal from './CheckoutDetailsModal.vue'
@@ -127,6 +128,13 @@ export default {
       default: false
     }
   },
+  setup () {
+    const authStore = useAuthStore()
+    return {
+      authenticated : computed(() => authStore.check),
+      user : computed(() => authStore.user)
+    }
+  },
   data: () => ({
     isYearly: true,
     selectedPlan: 'pro',
@@ -160,11 +168,6 @@ export default {
     }
   },
 
-  computed: {
-    ...mapGetters({
-      authenticated: 'auth/check',
-      user: 'auth/user'
-    })
-  }
+  computed: {}
 }
 </script>

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 {

resources/js/components/pages/welcome/AiFeature.vue

@@ -87,16 +87,19 @@
 </template>
 
 <script>
-import {mapGetters} from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../../../stores/auth'
 
 export default {
-    props: {},
-    data: () => ({}),
-    computed: {
-      ...mapGetters({
-        authenticated: 'auth/check'
-      }),
-    },
-    methods: {}
+  setup () {
+    const authStore = useAuthStore()
+    return {
+      authenticated : computed(() => authStore.check)
+    }
+  },
+  props: {},
+  data: () => ({}),
+  computed: {},
+  methods: {}
 }
 </script>

resources/js/components/pages/welcome/TemplatesSlider.vue

@@ -36,19 +36,23 @@
 </template>
 
 <script>
-import store from '~/store'
-import { mapGetters, mapState } from 'vuex'
+import { computed } from 'vue'
+import { useTemplatesStore } from '../../../stores/templates'
 import SingleTemplate from '../templates/SingleTemplate.vue'
 
 export default {
   components: { SingleTemplate },
   props: { },
+  setup () {
+    const templatesStore = useTemplatesStore()
+    return {
+      templatesStore,
+      templates : computed(() => templatesStore.content)
+    }
+  },
   data: () => ({}),
 
   computed: {
-    ...mapState({
-      templates: state => state['open/templates'].content
-    }),
     sliderTemplates () {
       return this.templates.slice(0, 20)
     }
@@ -66,7 +70,7 @@ export default {
   },
 
   mounted() {
-    store.dispatch('open/templates/loadAll', { limit: 20 })
+    this.templatesStore.loadAll({ limit: 20 })
   },
 
   methods: {

resources/js/components/service/Amplitude.vue

@@ -1,12 +1,21 @@
 <template />
 
 <script>
-import { mapGetters } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../../stores/auth'
 
 export default {
-
   name: 'Amplitude',
 
+  setup () {
+    const authStore = useAuthStore()
+    return {
+      authStore,
+      authenticated : computed(() => authStore.check),
+      user : computed(() => authStore.user)
+    }
+  },
+
   data: function () {
     return {
       loaded: false,
@@ -14,12 +23,7 @@ export default {
     }
   },
 
-  computed: {
-    ...mapGetters({
-      authenticated: 'auth/check',
-      user: 'auth/user'
-    })
-  },
+  computed: {},
 
   watch: {
     $route () {

resources/js/components/service/Hotjar.vue

@@ -1,12 +1,19 @@
 <template />
 
 <script>
-import { mapGetters } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../../stores/auth'
 
 export default {
-
   name: 'Hotjar',
 
+  setup () {
+    const authStore = useAuthStore()
+    return {
+      authenticated : computed(() => authStore.check),
+    }
+  },
+
   watch: {
     authenticated () {
       if (this.authenticated) {
@@ -38,9 +45,6 @@ export default {
   },
 
   computed: {
-    ...mapGetters({
-      authenticated: 'auth/check'
-    }),
     isIframe () {
       return window.location !== window.parent.location || window.frameElement
     }

resources/js/components/vendor/appsumo/AppSumoBilling.vue

@@ -21,23 +21,27 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../../../stores/auth'
 import VButton from '../../common/Button.vue'
 
 export default {
-
   name: 'AppSumoBilling',
   components: { VButton },
 
+  setup () {
+    const authStore = useAuthStore()
+    return {
+      user : computed(() => authStore.user),
+    }
+  },
+
   data () {
     return {
     }
   },
 
   computed: {
-    ...mapGetters({
-      user: 'auth/user'
-    }),
     licenseTier () {
       return this.user?.active_license?.meta?.tier
     },
@@ -67,10 +71,9 @@ export default {
 
   mounted () {},
 
-  created () {
-  },
-  destroyed () {
-  },
+  created () {},
+
+  destroyed () {},
 
   methods: {}
 }