vue3 store刷新失效场景解决方案

小汤猿人类2025-02-05 15:30

1. 安装 vuex-persistedstate 插件

vuex-persistedstate 是一个常用的插件，可以方便地将 Vuex 状态持久化到 localStorage 或 sessionStorage 中

复制代码

npm install vuex-persistedstate

2. 配置 Vuex Store 使用 sessionStorage

javascript 复制代码

// store/index.js
import { createStore } from 'vuex';
import createPersistedState from 'vuex-persistedstate';

export default createStore({
  state: {
    member: {}
  },
  mutations: {
    SET_MEMBER(state, payload) {
      state.member = payload;
    }
  },
  actions: {
    fetchMember({ commit }) {
      // 模拟异步获取用户信息
      setTimeout(() => {
        commit('SET_MEMBER', { name: 'John Doe', id: 1 });
      }, 1000);
    }
  },
  plugins: [
    createPersistedState({
      storage: window.sessionStorage, // 使用 sessionStorage
      paths: ['member'] // 指定要持久化的 state 路径
    })
  ]
});

3 .核心代码

javascript 复制代码

 plugins: [
    createPersistedState({
      storage: window.sessionStorage, // 使用 sessionStorage
      paths: ['member'] // 指定要持久化的 state 路径
    })
  ]