erio-vuex-persist

另一个 Vuex Storage 同步插件。

参考了 vuex-persist

特性

• 在 mutation 时自动储存状态
• 在初始化时会从 storage 中获取数据去恢复状态
• 支持 Vuex 模块
• 能选择需要同步的状态，不需要以模块为单位去进行
• 可以自定义 storage 与相关存取操作

安装

yarn add erio-vuex-persist

或者

npm i erio-vuex-persist

使用方法

import ErioVuexPersist from 'erio-vuex-persist'

const erioVuexPersist = new ErioVuexPersist({
  // 对 value3 与 mod 中的 value1 进行同步
  rule: {
    'increaseMod': [
      'mod.value1'
    ],
    'increaseAll': [
      'mod.value1',
      'value3'
    ]
  }
})

const store = new Vuex.Store({
  state: {
    mod: {
      value1: 0,
      value2: 0
    },
    value3: 0
  },
  mutations: {
    increaseMod (state) {
      state.mod.value1 += 1
      state.mod.value2 += 1
    },
    increaseAll (state) {
      state.mod.value1 += 1
      state.mod.value2 += 1
      state.value3 += 1
    },
    RESTORE_MUTATION: erioVuexPersist.RESTORE_MUTATION
  },
  plugins: [erioVuexPersist.plugin]
})

配置项

| 属性 | 类型 | 说明 | |--------------|----------|-----------------------------------------------------| | storage | Storage | 自定义容器实例，默认为：window.localStorage | | storageKey | String | 状态储存在容器中的键名，默认为：erio-vuex-persist | | rule | Rule | 状态同步规则 | | strict | Boolean | 严格模式，此模式必须声明 RESTORE_MUTATION，可通过订阅该 mutation 得到状态恢复完成的通知 | | restoreState | Function(key, storage) => any | 自定义从容器中恢复数据的操作 | | saveState | Function(key, storage, value) => void | 自定义将状态同步至容器的操作 |

关于 Rule

通过 Vuex 中的 subscribe 能订阅执行 mutation 后的操作，因此每一次的同步都是以 mutation 作为触发条件的。

与其他同类型插件不一样的是，本插件并不以模块为单位去同步，而是细化到模块中的状态，由于在 subscribe 中并不能得知某个 mutation 会影响到具体哪些状态，所以需要在 Rule 中定义两个部分：

1. 作为触发条件的 Mutation 类型
2. 该 Mutation 会影响到的具体状态（在 state 中的路径，如 [module].[value]）

Rule 格式形如：

{
  'Mutation 类型 1': [
    '状态路径 1',
    '状态路径 2'
  ],
  'Mutation 类型 2': [
    '状态路径 1'
  ]
}