migrate to pinia

Author: Sturm

assets/app.js

@@ -4,15 +4,16 @@ import * as components from 'vuetify/components';
 import * as directives from 'vuetify/directives';
 import '@mdi/font/css/materialdesignicons.css';
 import { createApp } from 'vue';
+import { createPinia } from 'pinia';
 import VueAxios from 'vue-axios';
 import axios from './plugins/axios';
 import App from './App.vue';
 import { registerPlugins } from './plugins';
-import store from './store/user';
 
+const pinia = createPinia();
 const app = createApp(App);
 app.use(VueAxios, axios);
-app.use(store);
+app.use(pinia);
 
 registerPlugins(app);
 

assets/layouts/default/DefaultLayout.vue

@@ -73,7 +73,7 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { useUserStore } from '../../store/user';
 
 export default {
   data: () => ({
@@ -93,12 +93,14 @@ export default {
     ],
   }),
   computed: {
-    ...mapGetters({
-      user: 'getUser',
-    }),
+    user() {
+      const userStore = useUserStore();
+      return userStore.getUser;
+    },
   },
   async mounted() {
-    await this.$store.dispatch('fetchUser');
+    const userStore = useUserStore();
+    await userStore.fetchUser();
     this.overlay = false;
   },
   methods: {

assets/store/user.js

@@ -1,27 +1,17 @@
-import { createStore } from 'vuex';
+import { defineStore } from 'pinia';
 import axios from '../plugins/axios';
 
-// Create a new store instance.
-export default createStore({
-  state() {
-    return {
-      user: null,
-    };
-  },
-  mutations: {
-    setUser(state, user) {
-      state.user = user;
-    },
-  },
+export const useUserStore = defineStore('user', {
+  state: () => ({
+    user: null,
+  }),
   getters: {
-    getUser(state) {
-      return state.user;
-    },
+    getUser: (state) => state.user,
   },
   actions: {
-    async fetchUser({ commit }) {
+    async fetchUser() {
       const { data } = await axios.get('/api/user');
-      commit('setUser', data);
+      this.user = data;
     },
   },
 });

package.json

@@ -23,6 +23,7 @@
         "@vitejs/plugin-vue": "^4.2.3",
         "axios": "^1.4.0",
         "core-js": "^3.29.0",
+        "pinia": "^2.1.7",
         "roboto-fontface": "*",
         "vue": "^3.2.0",
         "vue-axios": "^3.5.2",