Store的实例方法

在我们创建好Store实例后，我们应该怎么调用它的选项呢，那就用到了这些实例方法。

registerModule

在 store 创建之后，我们可以使用 store.registerModule 方法注册模块，也可以注册嵌套模块，如下：

import { createStore } from 'vuex'

const store = createStore({ /* 选项 */ })

// 注册模块 `myModule`
store.registerModule('myModule', {
  // ...
})
// 注册嵌套模块 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
  // ...
})

注册之后就可以通过 store.state.myModule 和 store.state.nested.myModule 访问模块的状态。

模块动态注册功能使得其他 Vue 插件可以通过在 store 中附加新模块的方式来使用 Vuex 管理状态。例如，[vuex-router-sync]插件就是通过动态注册模块将 Vue Router 和 Vuex 结合在一起，实现应用的路由状态管理。

也就是说我们通过注册动态模块，可以多插件使用和管理路由状态。

unregisterModule

我们可以用store.unregisterModule(moduleName) 来动态卸载模块，但是需要我们注意的是：不能使用此方法卸载静态模块（即创建 store 时声明的模块）。

hasModule

用来校验某某模块是否被注册到 store，我们就可以通过 store.hasModule(moduleName) 方法检查。

hotUpdate

Vuex 支持在开发过程中热重载 mutation、module、action 和 getter。对于 mutation 和模块，我们需要使用 store.hotUpdate() 方法，如下：

if (module.hot) {
  // 使 action 和 mutation 成为可热重载模块
  module.hot.accept(['./mutations', './modules/a'], () => {
    // 获取更新后的模块
    // 因为 babel 6 的模块编译格式问题，这里需要加上 `.default`
    const newMutations = require('./mutations').default
    const newModuleA = require('./modules/a').default
    // 加载新模块
    store.hotUpdate({
      mutations: newMutations,
      modules: {
        a: newModuleA
      }
    })
  })
}

总结

这些方法我们都是不常用的，但是你需要了解它们，以防碰到用到它们的情况。

想了解更多文章，传送门已开启：回首Vue3目录篇！

回首Vue3之状态管理篇（十）

Store的实例方法

registerModule

unregisterModule

hasModule

hotUpdate

总结