pinia数据持久化

参考：https://juejin.cn/post/7400589189391908899?searchId=20241115095207CDACA0D1F514B78B984F#heading-2

pinia数据持久化

指将Pinia状态管理中的数据存储到持久化存储介质（如localStorage或sessionStorage)中，以确保用户在刷新或者关闭浏览器后，状态数据不会丢失，避免因页面刷新或关闭而导致的数据丢失。

如何实现

直接安装插件解决

如：pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

在main.js中

import './assets/main.css'
import 'ant-design-vue/dist/reset.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
// 引入pinia的持久化存储插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

import App from './App.vue'
import router from './router'

const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
app.use(pinia)
app.use(router)

app.mount('#app')

store中使用,具体可查看：https://prazdevs.github.io/pinia-plugin-persistedstate-v2/guide/

import { defineStore } from 'pinia'
import { ref } from 'vue'
import {getLogin, getUserData } from '@/apis/login'
import { message } from 'ant-design-vue';
export const useUserStore = defineStore('user', ()=>{
  // 定义管理用户token的state
  const userInfo = ref({})
  // 获取token的action函数
  const getUserInfo = async (params) =>{
    const res = await getLogin(params)
    if(res.code === 200){
      localStorage.setItem('token',res.data.token)
      let infoRes = await getUserData();
      if(infoRes.code == 200){
        userInfo.value = infoRes.data
      }
      message.success('登录成功')
      return true;
    }
  }
  return {
    userInfo,
    getUserInfo
  }
},
{
  persist: {
  key: 'userInfo', //存储名称
  storage: localStorage, // 存储方式
  paths: ['userInfo'], //指定 state 中哪些数据需要被持久化。[] 表示不持久化任何状态，undefined 或 null 表示持久化整个 state
}
})

自己写一个简单的插件

在项目目录src下新建plugins文件夹新建persistencePlugin.js

const KEY_PREFIX = "PINIA:STATE:"
export default function(context){
  const { store } = context
  console.log('context', store.$state)
      // 动态生成 reset 方法
  const initialState = { ...store.$state };
  store.reset = function() {
    Object.keys(initialState).forEach(key => {
      this[key] = initialState[key];
    });
  };
// 当浏览器窗口关闭或刷新时触发
  window.addEventListener("beforeunload", function () {
    localStorage.setItem(KEY_PREFIX + store.$id, JSON.stringify(store.$state));
  });
  window.addEventListener('storage', (e) =>{
    if(e.key == KEY_PREFIX + store.$id){
      if(e.newValue == null){
        store.reset();
      } else {
        try {
          const state = JSON.parse(e.newValue);
          store.$patch(state);
        } catch (err) {
          store.reset();
        }
      }
    }
  })
  // 读取数据
  try{
    const state = JSON.parse(localStorage.getItem(KEY_PREFIX + store.$id))
    if(state){
      // 更新数据
      store.$patch(state)
    } else {
      store.reset()
    }
  } catch(err){
    console.log(err)
  }
}

使用和下载的插件解决的是一样的