pinia持久化

1.自己手动通过localStorage实现

import { defineStore } from 'pinia'

const useStore = defineStore('storeId', {
  // 推荐使用 完整类型推断的箭头函数
  state: () => {
    return {
      // 所有这些属性都将自动推断其类型
      token：localStorage.getItem("token") 
             ? localStorage.getItem("token") : "", // 认证凭证'
    }
  },
   actions: {
    setToken(value) {
      this.token=value;
      localStorage.setItem("token", val);
    }
  },
})

 2.通过插件实现

2.1. 安装插件 

npm i  pinia-plugin-persist --save

2.2 .main.js中装载插件

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'

const app = createApp(App);
const pinia = createPinia();
pinia.use(piniaPersist);
app.use(pinia)
  .mount('#app')

2.3 .在useXXstore中开启存储

import { defineStore } from 'pinia'

const useStore = defineStore('storeId', {
  // 推荐使用 完整类型推断的箭头函数
  state: () => {
    return {
      // 所有这些属性都将自动推断其类型
      token: "", // 认证凭证'，
      firstName:"",
      lastName:"",
    }
  },
   actions: {
    setToken(value) {
      this.token=value;
    }
  },
   persist: {
    enabled: true , // 这个配置代表存储生效，而且是整个store都存储，
                    //默认是sessionStorage存储
  },
})

2.4 .指定开启存储的对象及存储方式

persist: {
    enabled: true,
    strategies: [
      { storage: sessionStorage, paths: ['firstName', 'lastName'] }, 
        //  firstName 和 lastName字段用sessionStorage存储
      { storage: localStorage, paths: ['token'] }, 
        // accessToken字段用 localstorage存储
        //当只配置有一个storage，且不配置paths时，默认整个store内所有对象都将存储
    ],
  },