vuex-persistedstate怎么存入数据和读取数据

`vuex-persistedstate` 可以将 Vuex 的状态持久化到本地存储中，以便在应用程序重新加载时恢复状态。在使用 `vuex-persistedstate` 之前，需要先安装和配置它。

安装：

npm install vuex-persistedstate

配置：

import createPersistedState from "vuex-persistedstate";

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

接下来，您可以使用 `createPersistedState` 的 `key` 选项来设置在本地存储中存储状态的键。

const store = new Vuex.Store({
  // ...
  plugins: [
    createPersistedState({
      key: "my-app"
    })
  ]
});

现在，您可以在 Vuex store 中使用 `localStorage` 存储状态。例如：

const store = new Vuex.Store({
  // ...
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  plugins: [
    createPersistedState({
      key: "my-app"
    })
  ]
});

在上面的示例中，每当 `increment` mutation 在 store 中被调用时，`vuex-persistedstate` 将自动将新的 `state` 对象序列化并保存到 `localStorage` 中。

要从本地存储中检索状态，只需在创建 `Vuex` store 时将 `createPersistedState` 插件添加到 `plugins` 列表中即可。例如：

const store = new Vuex.Store({
  // ...
  plugins: [
    createPersistedState({
      key: "my-app"
    })
  ]
});

// 在 store 创建后，初始状态将从本地存储中加载。

您可以通过传递 `getState` 函数来配置 `createPersistedState` 来自定义从本地存储中检索状态的行为。例如：

const store = new Vuex.Store({
  // ...
  plugins: [
    createPersistedState({
      key: "my-app",
      getState: (key) => JSON.parse(localStorage.getItem(key)),
    })
  ]
});

在上面的示例中，`getState` 函数将从 `localStorage` 中检索状态。