pinia数据存本地缓存(数据持久化)插件pinia-plugin-persistedstate

1.安装pinia-plugin-persistedstate

pnpm install pinia-plugin-persistedstate

2.创建src/stores/index.ts

import {createPinia} from 'pinia';

const pinia = createPinia()
// vue3持久化
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
pinia.use(piniaPluginPersistedstate)


// 默认导出给main.ts使用
export default pinia

3.main.ts中引入 

// 导入 pinia 实例
import pinia from "./stores/index";

const app = createApp(App);
app.use(pinia);

4.创建使用src/stores/modules/userInfo.ts

import {defineStore} from 'pinia';
import {ref} from "vue";

export default defineStore('userInfoStore', () => {

    const userInfo = ref<{
      token: string,
      uid: string,//用户ID
      depth: string //层级深度
    }>()


    return {
      userInfo
    }
  },
  {
    persist: true//开启数据持久化
  }
);