*nix Programming Mammals

    erio-vuex-persist

    1.0.1 • Public • Published

    erio-vuex-persist

    Build Status npm license

    另一个 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'
      ]
    }

    Install

    npm i erio-vuex-persist

    DownloadsWeekly Downloads

    0

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    82.4 kB

    Total Files

    21

    Last publish

    Collaborators

    • erioifpud