利用vuex-persistedstate将vuex本地存储实现

利用 vuex-persistedstate 可以将 Vuex 状态持久化到本地存储中，目的是为了在页面刷新后还能够保持之前的状态。下面是 vuex-persistedstate 的完整攻略：

安装

在项目目录下执行以下命令安装 vuex-persistedstate：

npm install vuex-persistedstate --save

引入

在您的 Vuex store 入口文件中引入 vuex-persistedstate 模块并调用 createPersistedState 函数。

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

Vue.use(Vuex);

const store = new Vuex.Store({
  // 声明状态
  state: {},
  // 定义mutations
  mutations: {},
  // 定义actions
  actions: {},
  // 定义getters
  getters: {},
  // 插件
  plugins: [
    createPersistedState()
  ]
});

export default store;

配置

createPersistedState 函数可以接收一个可选的配置对象中以及一个可选的存储引擎对象。下面是 createPersistedState 函数常用的配置选项：

• key：用于存储持久化状态的键名称，默认为 vuex
• paths：指定哪些状态需要持久化，默认情况下会持久化所有状态，但是如果值为数组，那么只持久化数组中声明的状态
• reducer：自定义规则来减少存储的状态的大小，例如只存储有限的状态，将某些持久化状态字段重命名等等

plugins: [
  createPersistedState({
    key: 'myApp',
    paths: ['user'],
    reducer: state => {
      return {
        user: state.user
      };
    },
  }),
],

示例

以下是关于如何使用 vuex-persistedstate 的两个示例：

示例1：只持久化某个状态

假设我们有一个 counter 状态，它记录了页面上的一个计数器的值，我们只希望在页面刷新时持久化这个状态，其余状态都不需要持久化，这时候我们可以在 Vuex store 配置中加入以下内容：

plugins: [
  createPersistedState({
    paths: ['counter']
  })
],

这样，只有 counter 状态会被持久化到本地存储中。

示例2：自定义状态存储名称

默认情况下，持久化的状态对象会被存储在 localStorage 中，键名称为 vuex。但是很多时候我们希望自己来控制存储键的名称，这时候我们可以在 Vuex store 配置中加入以下内容：

plugins: [
  createPersistedState({
    key: 'myApp'
  })
],

这样，所有状态对象都会被存储在 localStorage 中，但是键名称为 myApp。