Vue Pinia

 掛載了pinia之後 main.js內會自動載入 pinia 和 app.use(createPinia);

接著會有一個資料夾叫stores 內有 counter.js

每一個defineStore內 都會有一個id 必須要有

import { useCounterStore } from "pinia路徑"

const store = useCounterStore();

const clickAdd = () => {

    store.increment();

}

這樣啟用這個function 則 store.counter會增加數值

接著可以把上述的寫法轉換成

以上的寫法

用這個寫法的話

import {storeToRefs} from "pinia"

const store = useCounterStore(); 

const {addCount} = store;

const {counter } = storeToRefs(store);

就可以直接用 {{ counter }} 而不是使用 {{store.counter}}

watch(value , (newval , oldval) => {

    //todo 這樣可以監控新舊的val

});

//新的方法有 $subscribe(mutation , state) => {

    //todo

}

兩個方法是一樣的

參考 : Vue3 + Vite 快速上手 Get Startrd EP6