方便追蹤與調(diào)試 state，支持 Composition API 定義 store涌献，支持 HMR胚宦，支持 Plugin 擴(kuò)展
其核心的 defineStore API，讓我覺(jué)得它可以摒棄之前 Vuex 的全局集中狀態(tài)管理的思想燕垃，利用 Vue 3 的 Composition 特性枢劝，提供隨處按需定義小型 store 的能力。
這讓我們更加容易編寫和管理很多不同模塊的 store卜壕，提高代碼可讀性您旁，也讓 store 更容易的擴(kuò)展。
如何持久化轴捎？
在某些特定的單頁(yè)面應(yīng)用場(chǎng)景下鹤盒，我們使用常規(guī)的 store 來(lái)存儲(chǔ)數(shù)據(jù)，很多時(shí)候面臨著刷新就會(huì)被重置侦副，所以侦锯，我們急需一個(gè)插件功能來(lái)實(shí)現(xiàn)對(duì)某些特定的數(shù)據(jù)進(jìn)行狀態(tài)保持。
這里我們很容易想到可以用 sessionStorage 或者 localStorage 來(lái)進(jìn)行相應(yīng)的處理秦驯，但是要對(duì)不同的 store 中不同的字段進(jìn)行處理
pinia-plugin-persist它提供了簡(jiǎn)便的使用方式以及靈活的配置方式尺碰，下面我就和大家分享一下這款插件的使用方式及實(shí)現(xiàn)原理。
安裝
1、 npm
npm install pinia-plugin-persist
2亲桥、 yarn
yarn add pinia-plugin-persist
3洛心、 pnpm
pnpm add pinia-plugin-persist
配置setup
vue2
import Vue from 'vue'
import vueCompositionApi from '@vue/composition-api'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'
const pinia = createPinia()
pinia.use(piniaPersist)
Vue.use(vueCompositionApi)
Vue.use(pinia)
vue3
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'
const pinia = createPinia()
pinia.use(piniaPersist)
createApp({})
.use(pinia)
.mount('#app')
Typescript definitions
將pinia-plugin-persist類型定義文件添加到您的 tsconfig 文件中。
{
"compilerOptions": {
"types": [
"pinia-plugin-persist"
]
},
}
高級(jí)用法
基本用法忽略
在store文件夾中創(chuàng)建index.ts
paths默認(rèn)情況下题篷，整個(gè)狀態(tài)都會(huì)被持久化词身，但是您可以通過(guò)在每個(gè)策略中設(shè)置鍵來(lái)指定想要持久化的狀態(tài)鍵。
在此示例中番枚，我們將firstName和保存lastName在 sessionStorage 中偿枕，并保存accessToken在 localStorage 中。
import { defineStore} from 'pinia'
export const useUserStore = defineStore('storeUser', {
state () {
return {
firstName: 'S',
lastName: 'L',
accessToken: 'xxxxxxxxxxxxx',
}
},
persist: {
enabled: true,//開啟存儲(chǔ)
strategies: [// 指定存儲(chǔ)的位置以及存儲(chǔ)的變量都有哪些户辫，該屬性可以不寫渐夸， // 在不寫的情況下，默認(rèn)存儲(chǔ)到sessionStorage 里面渔欢，默認(rèn)存儲(chǔ)state里面的所有數(shù)據(jù)墓塌。
{ storage: sessionStorage, paths: ['firstName', 'lastName'] },
{ storage: localStorage, paths: ['accessToken'] },
],
},
actions: {
//存儲(chǔ)登錄頁(yè)面的用戶和token
async piniaLogin(params: any) {
await login(params).then((res: any) => {
if (res.code == 200) {
this.token = res.data.token
this.username = res.data.account
}else if(res.code == 422){
ElMessage.error('賬號(hào)或密碼不對(duì)，請(qǐng)檢查賬號(hào)密碼')
}
});
}
}
})
登錄頁(yè)login.vue
// Pinia
import { useUserStore } from "@/store/index";
const store = testStore();
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
await formEl.validate((valid) => {
if (valid) {
store.piniaLogin(ruleForm.value);
console.log(ruleForm.value);
setTimeout(() => {
router.push("/");
ElMessage({ message: "登陸成功奥额！", type: "success" });
}, 1000);
isLoading.value = false;
}
});
};
