Setup pinia

Author: hasanakg

resources/js/Pages/Home.vue

@@ -107,8 +107,9 @@
 </template>
 
 <script lang="ts">
-    import { mapState, mapMutations } from 'vuex';
     import { Head as InertiaHead } from '@inertiajs/inertia-vue';
+    import { mapState } from 'pinia';
+    import { useStore } from '../store';
     import {
         Button as WikitButton,
         Dialog as WikitDialog,
@@ -194,14 +195,13 @@
                 if(this.validationError) {
                     return;
                 }
-
-                this.saveSearchedIds( this.form.itemsInput );
+                const store = useStore();
+                store.saveSearchedIds( this.form.itemsInput );
                 this.$inertia.get( '/results', { ids: this.serializeInput() } );
             },
             showRandom(): void {
                 this.$inertia.get( '/random' );
             },
-            ...mapMutations(['saveSearchedIds'])
         },
         computed: {
             serversideValidationError() {
@@ -213,14 +213,15 @@
                 return (flashMessages.errors && flashMessages.errors.unexpected);
             },
             // spread to combine with local computed props
-            // only mapping 'loading' and not 'lastSearchedIds' because computed 
+            // only mapping 'loading' and not 'lastSearchedIds' because computed
             //properties are not available when data is processed in vue's lifecycle
-            ...mapState(['loading']),
+            ...mapState(useStore, ['loading']),
         },
         data(): HomeState {
+            const store = useStore();
             return {
                 form: {
-                    itemsInput: this.$store.state.lastSearchedIds
+                    itemsInput: store.lastSearchedIds
                 },
                 validationError: null
             }

resources/js/Pages/Results.vue

@@ -135,7 +135,7 @@
 
 <script lang="ts">
     import { PropType } from 'vue';
-    import { mapMutations } from 'vuex';
+    import { useStore } from '../store';
     import isEmpty from 'lodash/isEmpty';
     import { Head as InertiaHead } from '@inertiajs/inertia-vue';
     import {
@@ -226,8 +226,9 @@
             },
         },
         mounted(){
-            if(!this.$store.state.lastSearchedIds) {
-                this.saveSearchedIds( this.item_ids.join('\n') );
+            const store = useStore();
+            if(!store.lastSearchedIds) {
+                store.saveSearchedIds( this.item_ids.join('\n') );
             }
 
             this.pageDirection = window.getComputedStyle(document.body).direction;
@@ -371,8 +372,7 @@
                 }
 
                 dialog.hide();
-            },
-            ...mapMutations(['saveSearchedIds'])
+            }
         }
     });
 </script>

resources/js/app.ts

@@ -1,6 +1,6 @@
 import './bootstrap';
-import { createStore } from './store';
 import {createApp, h} from 'vue';
+import {createPinia} from 'pinia';
 import {createInertiaApp} from '@inertiajs/inertia-vue3';
 import i18nMessages, { I18nMessages } from './lib/i18n';
 import {createI18n} from 'vue-banana-i18n'
@@ -19,9 +19,9 @@ async function setupI18n(locale: string): Promise<I18nMessages>{
 // component otherwise
 (async () => {
     try {
-        const store = createStore();
         const locale = document.documentElement.lang;
         const i18nMessages = await setupI18n(locale);
+        const pinia = createPinia();
         const i18nPlugin = createI18n({
             locale: locale,
             messages: i18nMessages
@@ -39,6 +39,7 @@ async function setupI18n(locale: string): Promise<I18nMessages>{
                     render: () => h(app, props)
                 })
                     .use(i18nPlugin)
+                    .use(pinia)
                     .use(plugin)
                     .mount(el)
             }

resources/js/store/index.ts

@@ -1,41 +1,44 @@
-import Vue from 'vue';
-import Vuex, {Store} from 'vuex';
+import { defineStore } from 'pinia';
 import RootState from './RootState';
 import { Inertia } from '@inertiajs/inertia';
-import mutations from './mutations';
 
-export function getInitialState(): RootState {
-    return {
-        loading: false,
-        lastSearchedIds: ''
-    }
-}
-
-export function createStore(): Store<RootState>{
-    Vue.use(Vuex);
-
-    const store = new Store({
-        state: getInitialState(),
-        mutations
-    });
+export const useStore = defineStore('storeId', {
+    state: () : RootState => {
+        return {
+            loading: false,
+            lastSearchedIds: ''
+        }
+    },
+    actions: {
+        startLoader () {
+            this.loading = true;
+        },
+        stopLoader () {
+            this.loading = false;
+        },
+        saveSearchedIds (searchedIds: string) {
+            this.lastSearchedIds = searchedIds;
+        }
+    },
 
-    let timer: ReturnType<typeof setTimeout>;
+});
 
-    Inertia.on('start', () => {
-        // Only instantiate loading state after 250ms. This is done to
-        // prevent a flash of the loader in case loading is nearly
-        // immediate, which can be visually distracting.
-        timer = setTimeout(() => store.commit('startLoader'), 250);
-    });
+let timer: ReturnType<typeof setTimeout>;
 
-    Inertia.on('finish', (event) => {
-        clearTimeout(timer);
-        const status = event.detail.visit;
+Inertia.on('start', () => {
+    // Only instantiate loading state after 250ms. This is done to
+    // prevent a flash of the loader in case loading is nearly
+    // immediate, which can be visually distracting.
+    const store = useStore();
+    timer = setTimeout(() => store.startLoader(), 250);
+});
 
-        if (status.completed || status.cancelled) {
-            store.commit('stopLoader');
-        }
-    });
+Inertia.on('finish', (event) => {
+    clearTimeout(timer);
+    const status = event.detail.visit;
 
-    return store;
-}
+    if (status.completed || status.cancelled) {
+        const store = useStore();
+        store.stopLoader();
+    }
+});