pinia数据持久化存储插件 pinia-plugin-pers

方便追踪与调试 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;
    }
  });
};