vue pinia数据持久化

1.安装插件

yarn add pinia-plugin-persistedstate

2.引入插件

将插件导入文件pinia实例

import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

const store = createPinia();
store.use(piniaPluginPersistedstate);
export default store;

3.在需要数据持久化的模块使用

第一种用法

import { defineStore } from 'pinia';

export const useUserStore = defineStore('test', {
  state: () => {
      return{
          message:'hello pinia-plugin-persistedstate'
      }
  },
  getters: {

  },
  actions: {
  },
  persist: true //会默认存储到localStorage中
});

第二种用法

import { defineStore } from 'pinia';

export const useUserStore = defineStore('test', {
  state: () => {
      return{
          message:'hello pinia-plugin-persistedstate'
      }
  },
  getters: {

  },
  actions: {
  },
  persist: {
    key: 'message',// 修改存储的键名，默认为当前 Store 的 id
    storage: window.sessionStorage,//存储在sessionStorage
  },
});

每个元素的key是想要储存的数据变量名，storage可以写sessionStorage或者localStorage，此时，sessionStorage中的key就是变量名，value就是该变量的值