方式一

使用vueuse提供的hook函数useSessionStorage和useLocalStorage，可以实现对某个变量的持久话

1. 安装vueuse库

   npm i @vueuse/core
   

2. 在stoer中使用

   import { useLocalStorage } from '@vueuse/core'
   
   export const useUserStore = defineStore('userStore', {
     state: () => ({
       // 会自动添加响应式
       userInfo: useLocalStorage('user',<UserInfo>{})
     }),
     getters: {},
     actions: {
       setUser(userInfo: UserInfo) {
         this.userInfo = userInfo
       }
     }
   }
   

方式二

使用pinia插件pinia-plugin-persist，在需要进行持久话的store中添加对应的配置项即可

1. 安装

   npm i pinia-plugin-persist
   

2. 新建src/store/index.ts

   // *************安装插件并导出Pinia实例**************
   import { createPinia } from 'pinia'
   import PiniaPluginPersist from 'pinia-plugin-persist'
   
   const store = createPinia()
   // 使用持久化插件
   store.use(PiniaPluginPersist)
   export default store
   

3. 在src/main.ts中引入

   import { createApp } from 'vue'
   import App from './App.vue'
   const app = createApp(App)
   
   import store from './store'
   app.use(store).mount('#app')
   

4. 在需要做持久化的store中添加配置

   import { defineStore} from 'pinia'
   
   /** user相关的store */
   export const useUserStore = defineStore('userStore', {
     state: () => ({
       userInfo: <UserInfo>{}
     }),
     getters: {},
     actions: {},
     // 数据持久化配置
     persist: {
       // 开启数据持久化
       enabled: true,
       strategies: [
         {
           // 本地存储中的键
           key: 'userStore',
           // 使用的本地存储类型，默认使用sessionStorage
           storage: localStorage
         }
       ]
     }
   })