Laravel + Vue3 + Pinia 筆記

npm install 以下套件

"pinia": "^2.0.36",
"vue": "^3.3.2",
"vue-loader": "^16.8.3",
"vue-template-compiler": "^2.7.14"

resources/js/counterStore.js 範例

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
    state: () => ({ 
        count: 0 
    }),
    getters: {
        double: (state) => state.count * 2,
    },
    actions: {
        increment() {
            this.count++
        }
    }
});

在 resources/js/app.js 加上

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import { mapStores } from 'pinia';
import { useCounterStore } from './counterStore.js';

const pinia = createPinia();
window.app = createApp({
    computed: {
        ...mapStores(useCounterStore),
    }
})
.use(pinia)
.mount('#app');

執行

npm run prod