Vuex は開発においてホットリローディングなアクションとミューテーションをサポートします。Webpack は Hot Module Replacement API を使用します。Browserify においても browserify-hmr プラグインによって使用することができます。
新しいアクションとミューテーションによって store.hotUpdate()
として呼び出すのと同じくらい簡単です:
// ...
const store = new Vuex.Store({
state,
actions,
mutations
})
if (module.hot) {
// ホットモジュールとしてアクションとモジュールを受け付ける
module.hot.accept(['./actions', './mutations'], () => {
// 更新されたモジュールをインポートする
// babel 6 モジュール出力のため、ここでは .default を追加しなければならない
const newActions = require('./actions').default
const newMutations = require('./mutations').default
// 新しいアクションとミューテーションにスワップ
store.hotUpdate({
actions: newActions,
mutations: newMutations
})
})
}