热重载

使用 webpack 的 Hot Module Replacement API，Vuex 支持在开发过程中热重载 mutation、module、action 和 getter。你也可以在 Browserify 中使用 browserify-hmr 插件。

对于 mutation 和模块，你需要使用 store.hotUpdate() 方法：

  1. // store.js
  2. import Vue from 'vue'
  3. import Vuex from 'vuex'
  4. import mutations from './mutations'
  5. import moduleA from './modules/a'
  7. Vue.use(Vuex)
  9. const state = { ... }
  11. const store = new Vuex.Store({
  12.   state,
  13.   mutations,
  14.   modules: {
  15.     a: moduleA
  16.   }
  17. })
  19. if (module.hot) {
  20.   // 使 action 和 mutation 成为可热重载模块
  21.   module.hot.accept(['./mutations', './modules/a'], () => {
  22.     // 获取更新后的模块
  23.     // 因为 babel 6 的模块编译格式问题，这里需要加上 `.default`
  24.     const newMutations = require('./mutations').default
  25.     const newModuleA = require('./modules/a').default
  26.     // 加载新模块
  27.     store.hotUpdate({
  28.       mutations: newMutations,
  29.       modules: {
  30.         a: newModuleA
  31.       }
  32.     })
  33.   })
  34. }

参考热重载示例 counter-hot。

原文: https://vuex.vuejs.org/zh/guide/hot-reload.html