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/auth/components/LoginForm.vue

@@ -41,8 +41,10 @@
 </template>
 
 <script>
+import { computed } from 'vue'
 import Form from 'vform'
 import Cookies from 'js-cookie'
+import { useAuthStore } from '../../../stores/auth'
 import OpenFormFooter from '../../../components/pages/OpenFormFooter.vue'
 import Testimonials from '../../../components/pages/welcome/Testimonials.vue'
 import ForgotPasswordModal from '../ForgotPasswordModal.vue'
@@ -62,6 +64,13 @@ export default {
     }
   },
 
+  setup () {
+    const authStore = useAuthStore()
+    return {
+      authStore
+    }
+  },
+
   data: () => ({
     form: new Form({
       email: '',
@@ -77,13 +86,10 @@ export default {
       const { data } = await this.form.post('/api/login')
 
       // Save the token.
-      this.$store.dispatch('auth/saveToken', {
-        token: data.token,
-        remember: this.remember
-      })
+      this.authStore.saveToken(data.token, this.remember)
 
       // Fetch the user.
-      await this.$store.dispatch('auth/fetchUser')
+      await this.authStore.fetchUser()
 
       // Redirect home.
       this.redirect()

resources/js/pages/auth/components/RegisterForm.vue

@@ -48,7 +48,9 @@
 </template>
 
 <script>
+import { computed } from 'vue'
 import Form from 'vform'
+import { useAuthStore } from '../../../stores/auth'
 import { initCrisp } from '../../../middleware/check-auth.js'
 
 export default {
@@ -62,6 +64,13 @@ export default {
     }
   },
 
+  setup () {
+    const authStore = useAuthStore()
+    return {
+      authStore
+    }
+  },
+
   data: () => ({
     form: new Form({
       name: '',
@@ -112,10 +121,10 @@ export default {
         const { data: { token } } = await this.form.post('/api/login')
 
         // Save the token.
-        this.$store.dispatch('auth/saveToken', { token })
+        this.authStore.saveToken(token)
 
         // Update the user.
-        await this.$store.dispatch('auth/updateUser', { user: data })
+        await this.authStore.updateUser(data)
 
         // Track event
         this.$logEvent('register', { source: this.form.hear_about_us })