方便追踪与调试 state，支持 Composition API 定义 store，支持 HMR，支持 Plugin 扩展
其核心的 defineStore API，让我觉得它可以摒弃之前 Vuex 的全局集中状态管理的思想，利用 Vue 3 的 Composition 特性，提供随处按需定义小型 store 的能力。
这让我们更加容易编写和管理很多不同模块的 store，提高代码可读性，也让 store 更容易的扩展。
如何持久化？
在某些特定的单页面应用场景下，我们使用常规的 store 来存储数据，很多时候面临着刷新就会被重置，所以，我们急需一个插件功能来实现对某些特定的数据进行状态保持。
这里我们很容易想到可以用 sessionStorage 或者 localStorage 来进行相应的处理，但是要对不同的 store 中不同的字段进行处理
pinia-plugin-persist它提供了简便的使用方式以及灵活的配置方式，下面我就和大家分享一下这款插件的使用方式及实现原理。
安装
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"
]
},
}
高级用法
基本用法忽略
在store文件夹中创建index.ts
paths默认情况下，整个状态都会被持久化，但是您可以通过在每个策略中设置键来指定想要持久化的状态键。
在此示例中，我们将firstName和保存lastName在 sessionStorage 中，并保存accessToken在 localStorage 中。
1.png
import { defineStore} from 'pinia'
export const useUserStore = defineStore('storeUser', {
state () {
return {
firstName: 'S',
lastName: 'L',
accessToken: 'xxxxxxxxxxxxx',
}
},
persist: {
enabled: true,//开启存储
strategies: [// 指定存储的位置以及存储的变量都有哪些，该属性可以不写， // 在不写的情况下，默认存储到sessionStorage 里面，默认存储state里面的所有数据。
{ storage: sessionStorage, paths: ['firstName', 'lastName'] },
{ storage: localStorage, paths: ['accessToken'] },
],
},
actions: {
//存储登录页面的用户和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('账号或密码不对，请检查账号密码')
}
});
}
}
})
登录页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;
}
});
};
