vuex 如何持久化

Vuex是一个用于Vue.js应用程序的状态管理模式。它允许我们在应用程序中集中管理和共享状态，并提供了一种可预测的方式来修改和获取状态。在Vuex中，持久化状态通常指的是将状态保存在本地存储中，以便在刷新页面或重新加载应用程序时能够保持状态的一致性。

要实现Vuex的状态持久化，可以使用一些第三方库或插件。以下是两种常见的方法：

1. 使用vuex-persistedstate插件：这是一个专门为Vuex设计的插件，它可以将Vuex的状态保存在本地存储中。首先，你需要安装该插件：

npm install vuex-persistedstate

然后，在创建Vuex的store实例时，将该插件添加到Vuex的插件列表中：

import createPersistedState from 'vuex-persistedstate';

const store = new Vuex.Store({
  // ...其他配置
  plugins: [createPersistedState()]
});

这样配置后，当你在应用程序中修改了Vuex的状态时，该插件会自动将状态保存在本地存储中，并在重新加载应用程序时将其还原。

2. 手动实现状态持久化：如果你不想使用第三方插件，也可以手动实现状态的持久化。你可以通过监听Vuex的mutation来实现。在每次mutation被触发时，将状态保存在本地存储中。在应用程序初始化时，从本地存储中读取状态并还原。

const store = new Vuex.Store({
  // ...其他配置
  mutations: {
    // ...其他mutation
    persistState(state) {
      localStorage.setItem('vuex_state', JSON.stringify(state));
    }
  },
  plugins: [
    (store) => {
      store.subscribe((mutation, state) => {
        if (mutation.type !== 'persistState') {
          store.commit('persistState');
        }
      });
    }
  ]
});

上述代码中，我们定义了一个mutation `persistState`，在每次mutation被触发时，将状态保存在本地存储中。然后，通过订阅store的mutation来实现自动保存状态的功能。