基本使用

• 在main.js中注冊pinia

import { Vue,createApp } from 'vue' import App from './App' const app = createApp(App) // 引入pinia import { createPinia } from 'pinia' // 初始化pinia,并注冊 const pinia = createPinia() app.use(pinia).mount('#app')

• /store/counter.js 聲明store的配置

import { defineStore } from 'pinia' export const useCounterStore = defineStore('counter',{state(){return {count: 10,price: 100}},getters:{totalPrice(){return `￥${this.count * this.price}`;}},actions:{increment(num){this.count += num}} })

• 在App.vue中使用store

<script setup> // 引用counter倉庫 import { useCounterStore } from '@/store/counter' // 初始化倉庫 const store = useCounterStore(); </script><template><button type="button" @click="handleChangeSum">count is: {{ countStore.count }}</button><button type="button">price is: {{ countStore.price }}</button><h1>總價格:{{ countStore.totalPrice }}</h1> </template>

一、修改屬性的四種方式

/*** 1. 直接修改* 因為pinia中的state屬性都是響應式的,pinia支持直接修改屬性*/const dispatchIncrement = ()=>{store.count+=100;}/*** 2. 使用$patch更改屬性* $patch支持兩種修改屬性的方法(對象形式或回調函數形式)*/const dispatchIncrement = ()=>{// $patch對象形式store.$patch({ count: store.count + 100})}/*** 3. 使用$patch更改屬性 (回調函數形式)*/const dispatchIncrement = ()=>{// $patch對象形式store.$patch((state)=>{ state.count+=100 })}/*** 4. 使用actions修改屬性*/const dispatchIncrement = ()=>{store.increment(100)}

二、state屬性解構實現響應式

import { useCounterStore } from '@/store/counter' import { storeToRefs } = 'pinia' // 初始化倉庫 const store = useCounterStore(); // 通過storeToRefs實現解構后依然是響應式狀態 (內部通過toRef實現) const { count,price,totalPrice } = storeToRefs(store)<template><button type="button" @click="handleChangeCount">count is: {{ count }}</button><button type="button">price is: {{ price }}</button><h1>總價格:{{ totalPrice }}</h1> </template>

三、actions

counter.ts

export const useCounterStore = defineStore('counter', {actions: {getRandomNum(delay: number): Promise<number> {return new Promise(resolve => {setTimeout(() => {resolve(Math.random());}, delay);});},}, });

App.vue

import { useCounterStore } from '@/store/counter' const store = useCounterStore()const getRandomNumClick = async () => {// 兩秒之后獲取一個隨機數const number = await store.getRandomNum(2000);console.log(number); }<template><button @click="getRandomNumClick">獲取隨機數</button> </template>

三、監聽store的變化

// 監聽store的變化 countStore.$subscribe((mutations, state) => {console.log(mutations, state); })

四、重置數據

// 調用$reset方法重置數據 const reset = () => {countStore.$reset() }<button @click="reset">重置</button>

源碼分析與實現

一、createPinia

• 該方法返回一個pinia對象,內部提供install方法,方便注冊
• _a 用于保存Vue的實例對象
• _m 參數用于保存所有的模塊
• _e 最外層的作用域scope
• state 通過作用域創建的ref對象,初始值是一個空對象{}

import { markRaw,EffectScope } from 'vue' import type { App } from 'vue' interface Pinia {install:(app:App)=>void_e: EffectScope;_m: Map<any, any>;_a?:App;state:Ref<Record<string,any>> } export function craetePinia(){// 創建一個scope用于控制依賴收集const scope = effectScope(true);// 初始化一個state 用于保存store所有的狀態const state = scope.run(()=>ref({}))!// 聲明一個pinia倉庫(不能被響應式)const pinia = markRaw<Pinia>({install(app:App){// 保存Vue的實例對象pinia._a = app;// 將pinia注入組件app.provide(SymbolPinia,pinia);// 將pinia掛載到全局app.config.globalProperties.$pinia = pinia;}_e: scope, // pinia依賴收集的作用域_m: new Map, // 管理倉庫的集合state // 存放所有的狀態})return pinia; }

二、defineStore

store對象

• 每一個store都是一個reactive對象
• 處理state,getters,actives,將三者中的屬性與store合并
• 將合并好的store對象存到pinia._m的集合內,key為該倉庫id,值為store

state

• 從模塊的配置項中取出state并執行
• 通過toRefs將state中的屬性轉為響應式
• 將結果合并到store

getters

• 每一個getter都是一個計算屬性的結果,具有緩存特性,getter中的this指向store
• 重新為getter賦值,他的結果是computed的結果,并且在計算屬性內通過call調用原始getter函數
• 將結果合并到store

actions

• 重寫action的方法,通過apply調用原始action,改變action函數的this指向
• 將結果合并到store

import {computed,effectScope,getCurrentInstance,inject,reactive,toRefs,ComputedRef,UnwrapRef,isRef,isReactive, } from 'vue'; import { SymbolPinia } from './rootStore'; import { Pinia, StoreOptions, StoreOptionsId, StateTree } from './types'; import { isObject } from './utils';// defineStore第一個參數可以是id 或者是一個配置項 export function defineStore(idorOptions: string, options: StoreOptions): () => void; export function defineStore(idorOptions: StoreOptionsId): () => void; export function defineStore(idorOptions: string | StoreOptionsId, optionsSetup?: StoreOptions) {let id: string;let options: StoreOptions | StoreOptionsId;// 用戶傳入的可能第一個值是字符串的idif (typeof idorOptions === 'string') {id = idorOptions;options = optionsSetup!;} else if (typeof idorOptions === 'object') { //傳入的第一個參數是一個包含id的配置項id = idorOptions.id;options = idorOptions;}// 創建這個store 并添加到pinia._m中function useStore() {// 獲取組件的實例const currentInstance = getCurrentInstance();// 使用inject獲取piniaconst pinia = currentInstance && inject<Pinia>(SymbolPinia);// 從pinia._m屬性中獲取倉庫let store = pinia?._m.get(id);// 第一次獲取沒有這個倉庫 則創建倉庫if (!store) pinia?._m.set(id, (store = createOptionsStore(id, options, pinia)));return store;}return useStore; }function createOptionsStore(id: string, options: StoreOptions | StoreOptionsId, pinia: Pinia) {// 從配置中取出用于創建的state actions getters屬性let { state, actions, getters } = options;// 每一個倉庫都是一個響應式對象let store = reactive({});function setup() {/*** 處理state* 將state中的數據添加到pinia.state中* state中所有的值都應該是響應式的*/pinia.state.value[id] = state ? state() : {};const localState = toRefs(pinia.state.value[id]) as any;/*** 處理getters* 因為每一個getter都是一個具有緩存的計算屬性,直接使用computed處理即可*/let localGetters = Object.keys(getters || {}).reduce((computedGetters, name) => {computedGetters[name] = computed(() => {return getters?.[name].call(store, store);});return computedGetters;}, {} as Record<string, ComputedRef>);// 返回處理后的結果return Object.assign(localState, actions, localGetters);}// 往最外層的作用域內添加依賴(最外層作用域的scope可以管理所有模塊的依賴)const setupStore = pinia._e.run(() => {// 每一個store也有自己的作用域effectconst scope = effectScope();// 使用setup收集參數return scope.run(() => setup());});/*** 處理actions* 改變action函數的this執行*/for (let key in setupStore) {let prop = setupStore[key];// 攔截action并改寫action的方法if (typeof prop === 'function') {prop = wrapAction(key, prop);}}function wrapAction(key: string, actionValue: Function) {return function (...args: any[]) {let res = actionValue.apply(store, args);return res;};}// 返回一個響應式的store對象return Object.assign(store, setupStore); }

三、$patch()

合并更新操作,參數可以是對象或函數

新值與舊值嵌套對象的情況下,遞歸拷貝覆蓋

// $patch可以是對象或函數 function $patch(stateMutation: (state: UnwrapRef<S>) => void): void; function $patch(partialState: _DeepPartial<UnwrapRef<S>>): void; function $patch(partialStateOrMutator: _DeepPartial<UnwrapRef<S>> | ((state: UnwrapRef<S>) => void) ) {if (typeof partialStateOrMutator === 'function') {// 函數直接執行partialStateOrMutator(pinia._m.get(id));} else {// 對象選擇拷貝覆蓋mergeReactiveObjects(pinia._m.get(id), partialStateOrMutator);} }function mergeReactiveObjects<T extends StateTree>(target: T, patchToApply: _DeepPartial<T>): T {// 將數據合并到store中for (let key in patchToApply) {// 原型鏈上的屬性不做處理if (!patchToApply.hasOwnProperty(key)) continuelet subPatch = patchToApply[key]!; // 新的數據let targetValue = target[key]; // 舊的數據// 新數據和舊數據仍然是對象的話 需要遞歸處理 (ref和reactive對象不做處理)if (isObject(subPatch) &&isObject(targetValue) &&target.hasOwnProperty(key) &&!isRef(subPatch) &&!isReactive(subPatch)) {// 遞歸拷貝target[key] = mergeReactiveObjects(targetValue, subPatch);} else {// @ts-expect-errortarget[key] = subPatch;}}return target; }const partialStore = {$patch,};// 返回合并后的整個store對象Object.assign(store, partialStore, setupStore);return store;

四、$reset()

$reset函數用于重置state為初始狀態

重新調用state方法,使用$patch更新

Object.assign(store, partialStore, setupStore); /*** 重置state中的狀態*/ store.$reset = function () {// 重新獲取state的結果const newState = state ? state() : {};// 使用patch將原始結果更新this.$patch(($state: _DeepPartial<UnwrapRef<S>>) => {Object.assign($state, newState);}); }; return store;

五、$subscript()

$subscript函數用于監聽state中屬性的變化

內部使用watch實現

const partialStore = {$patch,// 監聽屬性的變化$subscript(callback: Function, options = {}) {scope.run(() => {watch(pinia.state.value[id], $state => {callback({ id, type: 'direct' }, $state);});});},};Object.assign(store, partialStore, setupStore);return store;

六、storeToRefs

• 將store中的屬性通過toRef進行轉為響應式屬性

import { isReactive, isRef, toRaw, toRef } from 'vue'; import { StateTree } from './types';export function storeToRefs(store: StateTree) {store = toRaw(store);const ref = {} as Partial<typeof store>;for (let key in store) {if (isRef(store[key]) || isReactive(store[key])) {ref[key] = toRef(store, key);}}return ref; }

總結

以上是生活随笔為你收集整理的Pinia基本使用与源码分析-手动实现部分主要功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。