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

######方便追踪与调试 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 中。

  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;
        }
      });
    };