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/subscriptions/error.vue

@@ -1,7 +1,8 @@
 <template />
 
 <script>
-import { mapGetters } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../../stores/auth'
 import SeoMeta from '../../mixins/seo-meta.js'
 
 export default {
@@ -10,6 +11,13 @@ export default {
   middleware: 'auth',
   mixins: [SeoMeta],
 
+  setup () {
+    const authStore = useAuthStore()
+    return {
+      authenticated : computed(() => authStore.check),
+    }
+  },
+
   data: () => ({
     metaTitle: 'Error',
   }),
@@ -19,10 +27,6 @@ export default {
     this.alertError('Unfortunately we could not confirm your subscription. Please try again and contact us if the issue persists.')
   },
 
-  computed: {
-    ...mapGetters({
-      authenticated: 'auth/check'
-    })
-  }
+  computed: {}
 }
 </script>

resources/js/pages/subscriptions/success.vue

@@ -16,7 +16,8 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../../stores/auth'
 import OpenFormFooter from '../../components/pages/OpenFormFooter.vue'
 import SeoMeta from '../../mixins/seo-meta.js'
 
@@ -26,6 +27,15 @@ export default {
   layout: 'default',
   middleware: 'auth',
 
+  setup () {
+    const authStore = useAuthStore()
+    return {
+      authStore,
+      authenticated : computed(() => authStore.check),
+      user : computed(() => authStore.user)
+    }
+  },
+
   data: () => ({
     metaTitle: 'Subscription Success',
     interval: null
@@ -43,7 +53,7 @@ export default {
   methods: {
     async checkSubscription () {
       // Fetch the user.
-      await this.$store.dispatch('auth/fetchUser')
+      await this.authStore.fetchUser()
       this.redirectIfSubscribed()
     },
     redirectIfSubscribed () {
@@ -63,11 +73,6 @@ export default {
     }
   },
 
-  computed: {
-    ...mapGetters({
-      authenticated: 'auth/check',
-      user: 'auth/user'
-    })
-  }
+  computed: {}
 }
 </script>