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/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>