vue知识点总结 --- vuex热更替

原创于 2018-09-14 17:01:03 发布 · 590 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在修改Vuex的状态、mutations、actions和getters时，利用webpack的热模块替换功能，实现在开发过程中不刷新页面即可看到状态更新的效果。

修改state、mutations等配置时，不触发页面刷新

export default () => {
  const store = new Vuex.Store({
    state: defaultState,
    mutations,
    actions,
    getters
  })
  // webpack热更替
  if (module.hot) {
    module.hot.accept([
      './state/state',
      './mutations/mutations',
      './actions/actions',
      './getters/getters'
    ], () => {
      const newState = require('./state/state').default
      const newMutations = require('./mutations/mutations').default
      const newActions = require('./actions/actions').default
      const newGetters = require('./getters/getters').default
      store.hotUpdate({
        state: newState,
        mutations: newMutations,
        actions: newActions,
        getters: newGetters
      })
    })
  }
  return store
}