pinia持久化存储

​ 最近使用了pinia代替vuex，它和vuex一样，默认也是非持久化储存，刷新页面会丢失更新后的值。

​ store/index.ts代码：持久化储存可以使用三方插件，快捷简单方便奈斯。

#store/index.ts
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'; //持久化存储,需要安装对应依赖
const pinia = createPinia();//持久化使用
pinia.use(piniaPersist);//持久化使用
export default pinia;//持久化使用

// const store = createPinia(); 非持久化使用
// export default pinia;非持久化使用

​ store/user.ts代码：如果按照默认使用方法，在上面引入持久化插件后默认所有的store的值都是持久化的。

import { defineStore } from 'pinia';
//userInfo、token、tst都会默认存储在localstorage里面。
export const useUserStore = defineStore('user', {
  state: () => {
    return {
      userInfo: {
        name: 'zhangsan',
        age: 23,
      },
      token: 'S1',
      tst: '22',
    };
  }
});

​ 我们可以根据对应的数据来决定是否持久化储存、或者存储到sessionstorage里面。

import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
  state: () => {
    return {
      userInfo: {
        name: 'zhangsan',
        age: 23,
      },
      token: 'S1',
      tst: '22',
    };
  }，
   persist: {
    enabled: true,
    strategies: [
      {
        key: 'userToken',//localstorage的key
        storage: localStorage,//储存位置
        paths: ['token', 'tst'],//需要储存的值，可以多个
      },
      {
        key: 'userInfo',
        storage: localStorage,
        paths: ['userInfo'],
      },
    ],
  },
});

​ 搞定！