官網(wǎng)：https://pinia.vuejs.org/
0.初始化配置
// 創(chuàng)建項(xiàng)目
yarn create vite
// 安裝pinia
npm install pinia
1.創(chuàng)建 Pinia 實(shí)例并掛載
// src/main.js
import { createPinia } from 'pinia';
// 創(chuàng)建 Pinia 實(shí)例
const pinia = createPinia();
// 掛載到Vue根實(shí)例
createApp(App).use(pinia).mount('#app');
2.定義Store
// stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0, name: 'Eduardo' }),
getters: {
// 使用箭頭函數(shù)
doubleCount: (state) => state.count * 2,
// 如果使用普通函數(shù),不接收state也可以使用this
doubleCount1(){
return this.count * 2
},
},
actions: {
// 不能使用箭頭函數(shù)定義肴沫，因?yàn)槭褂眉^函數(shù)會(huì)導(dǎo)致 this 指向錯(cuò)誤
increment() {
this.count++
// this.$patch({}) // 批量更新
// this.$patch((state) => {});
},
},
})
參數(shù)解析：
- 參數(shù)1：是整個(gè)應(yīng)用中store的唯一名稱(id)
- 參數(shù)2：Store中的選項(xiàng)可以傳遞一個(gè)帶有state愿卒、actions和getters屬性的選項(xiàng)對(duì)象。
- state就類似于組件的 data ，用來(lái)存儲(chǔ)全局狀態(tài)的留荔；getters就類似于組件的 computed，用來(lái)封裝計(jì)算屬性合瓢，有緩存功能伸眶；actions類似于組件的 methods，用來(lái)封裝業(yè)務(wù)邏輯敷扫，修改 state哀蘑。
- 基本使用
// 方案一：使用Store
import { useMainStore } from '../store';
setup(){
const mainStore = useMainStore();
console.log(mainStore.count); // 獲取到Store中的count
}
// 方案二：ES6解構(gòu)數(shù)據(jù)
import { storeToRefs } from 'pinia'
setup(){
const mainStore = useMainStore();
const { count } = storeToRefs(mainStore);
return { count }
}
說(shuō)明：Pinia 其實(shí)把 state 數(shù)據(jù)都做了 reactive 處理了。
發(fā)現(xiàn)問(wèn)題：ES6解構(gòu)出來(lái)的數(shù)據(jù)是有問(wèn)題的葵第，已經(jīng)丟失了響應(yīng)式绘迁，也就是一次性的，之后對(duì)數(shù)據(jù)的修改Vue是無(wú)法監(jiān)測(cè)到數(shù)據(jù)變化的卒密。
解決辦法：使用Pinia為我們提供的storeToRefs()API脊髓，這就類似Vue3中的toRefs()。
4.狀態(tài)更新和Actions
const handleChangeState = () =>{
// (1)直接修改
mainStore.count++;
// (2)修改多個(gè)數(shù)據(jù)栅受，建議使用 $patch批量更新
mainStore.$patch({
count: mainStore.count + 1
});
// (3)批量更新：$patch傳遞一個(gè)函數(shù)
mainStore.$patch((state) => {
state.count++;
});
// (4)邏輯比較多将硝，封裝到 actions 里
mainStore.increment();
}
