如何在 Vuex 中使用插件进行状态持久化？

在 Vuex 中实现状态持久化（如页面刷新后保留状态），最常用的方式是使用成熟的插件 vuex-persistedstate。以下是具体实现步骤：

1. 安装插件

首先安装 vuex-persistedstate：

npm install vuex-persistedstate --save
# 或
yarn add vuex-persistedstate

2. 基本使用（默认存储到 localStorage）

在创建 Vuex Store 时引入并使用插件，默认会将所有状态持久化到 localStorage：

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    user: null, // 需要持久化的用户信息
    token: '',  // 需要持久化的令牌
    count: 0    // 非持久化状态（可配置排除）
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
    setToken(state, token) {
      state.token = token;
    },
    increment(state) {
      state.count++;
    }
  },
  // 引入持久化插件
  plugins: [
    createPersistedState() // 默认存储到 localStorage
  ]
});

export default store;

3. 高级配置（自定义存储方式和范围）

如果需要自定义存储位置（如 sessionStorage）、指定需要持久化的状态或排除某些状态，可以通过配置参数实现：

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    user: null,
    token: '',
    count: 0,
    tempData: '' // 临时数据，不需要持久化
  },
  mutations: { /* ... */ },
  plugins: [
    createPersistedState({
      // 1. 自定义存储方式（默认 localStorage）
      storage: window.sessionStorage, // 改为 sessionStorage

      // 2. 指定需要持久化的状态（只持久化 user 和 token）
      reducer: (state) => ({
        user: state.user,
        token: state.token
      }),

      // 3. 自定义存储的 key（默认是 'vuex'）
      key: 'my-app-state',

      // 4. 过滤 mutation（只在特定 mutation 后持久化）
      filter: (mutation) => {
        // 只在执行 setUser 或 setToken 后持久化
        return ['setUser', 'setToken'].includes(mutation.type);
      }
    })
  ]
});

export default store;

4. 模块化状态的持久化

如果使用 Vuex 模块化（modules），可以通过 paths 指定需要持久化的模块或模块内的状态：

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';

// 定义用户模块
const userModule = {
  state: () => ({
    info: null,
    roles: []
  }),
  mutations: { /* ... */ }
};

// 定义购物车模块
const cartModule = {
  state: () => ({
    items: []
  }),
  mutations: { /* ... */ }
};

const store = new Vuex.Store({
  modules: {
    user: userModule,
    cart: cartModule
  },
  plugins: [
    createPersistedState({
      // 只持久化 user 模块的 info 和 cart 模块的 items
      paths: ['user.info', 'cart.items']
    })
  ]
});

export default store;

5. 实现原理说明

vuex-persistedstate 的核心逻辑是：

1. 通过 Vuex 插件的 store.subscribe 监听 mutation 触发。
2. 在状态变更后，将指定的状态数据序列化（JSON.stringify）并存储到 localStorage 或 sessionStorage。
3. 在 store 初始化时，从存储中读取数据并通过 store.replaceState 恢复状态。

注意事项

• 性能影响：频繁修改的状态（如计数器）不建议持久化，避免频繁读写存储。
• 数据类型限制：localStorage 只能存储字符串，复杂类型（如 Date、RegExp）会被序列化丢失类型，需手动处理。
• 安全性：敏感信息（如 token）存储到 localStorage 有 XSS 风险，可考虑加密或使用 httpOnly Cookie。

通过上述配置，即可实现 Vuex 状态在页面刷新后的持久化保存。