Горячая перезагрузка
Vuex поддерживает горячую перезагрузку мутаций, модулей, действий и геттеров во время разработки, используя API горячей замены модулей webpack. Также вы можете использовать его в Browserify с плагином browserify-hmr.
Для мутаций и модулей необходимо использовать метод API store.hotUpdate().
// store.js
import { createStore } from 'vuex'
import mutations from './mutations'
import moduleA from './modules/a'
const state = { ... }
const store = createStore({
state,
mutations,
modules: {
a: moduleA
}
})
if (module.hot) {
// accept actions and mutations as hot modules
module.hot.accept(['./mutations', './modules/a'], () => {
// require the updated modules
// have to add .default here due to babel 6 module output
const newMutations = require('./mutations').default
const newModuleA = require('./modules/a').default
// swap in the new modules and mutations
store.hotUpdate({
mutations: newMutations,
modules: {
a: newModuleA
}
})
})
}
Посмотрите пример counter-hot, чтобы поиграться с горячей перезагрузкой.
Динамическая горячая перезагрузка модулей
Если вы используете исключительно модули, вы можете использовать require.context для динамической загрузки и горячей перезагрузки всех модулей.
// store.js
import { createStore } from 'vuex'
// Load all modules.
function loadModules() {
const context = require.context("./modules", false, /([a-z_]+)\.js$/i)
const modules = context
.keys()
.map((key) => ({ key, name: key.match(/([a-z_]+)\.js$/i)[1] }))
.reduce(
(modules, { key, name }) => ({
...modules,
[name]: context(key).default
}),
{}
)
return { context, modules }
}
const { context, modules } = loadModules()
const store = createStore({
modules
})
if (module.hot) {
// Hot reload whenever any module changes.
module.hot.accept(context.id, () => {
const { modules } = loadModules()
store.hotUpdate({
modules
})
})
}
© 2015–present Evan You
Licensed under the MIT License.
https://next.vuex.vuejs.org/guide/hot-reload.html