Vuex之热重载

所谓热重载就是页面每次改动,不需要手动去刷新,可自动刷新。
使用webpack的Hot Module Replacement API,Vuex支持开发过程中热重载mutation、module、action、getter。

import Vue from 'vuex'
import Vuex from 'vuex'
import mutations from './mutations'
import moduleA from './modules/a'

Vue.use(Vuex)

const state={ ... }
const store=new Vuex.Store({
 state,
 mutations,
 modules:{
  a:moduleA
 }
})

if(module.hot){
 module.hot.accept(['./mutations','./modules/a'],() => {
  //1.获取更新后的模块
  //因为babel6的模块编译格式问题,这里需要加上.default
  const newMutations=require('./mutations').default
  const new ModuleA=require('./modules/a').default
  //2.加载新模块
  store.hotUpdate({
   mutations:newMutations,
   modules:{
    a:newModuleA
   }
  })
 })
}

猜你喜欢

转载自blog.csdn.net/E_li_na/article/details/80268820