前言我们在使用Vuex的时候，会时不时的更改Vuex中的数据，但是页面不会随之更新。如果数据量很大，一个数据又依赖另一个，那么如果我们再次刷新页面，就会清空之前依赖的数据，效率极低。所以，今天总结一下如何实现Vuex热替换的功能。实现首先，我们在这里使用VueCLI3。在根目录下的src目录下，我们有一个存放Vuex的文件夹叫做store文件夹。首先我们把它分成几个模块。下面我们分别介绍一下。这里不做动作划分，其他的属性都是一样的，这里就不介绍了。接下来，我们在index.js中编辑如下代码：importVuexfrom'vuex'//引入拆分模块importstatefrom'./state/state'importmutationsfrom'./mutations/mutations'importgettersfrom'./getters/getters'exportdefault()=>{//这里需要赋值一个store变量conststore=newVuex.Store({state:state,mutations:mutations,getters:getters})//热更新模块if(module.hot){//同上，写入相应的拆分模块路径module.hot.accept(['./state/state','./mutations/mutations','./getters/getters'],()=/启用热替换constnewState=require('./state/state').defaultconstnewMutations=require('./mutations/mutations').defaultconstnewGetters=require('./getters/getters').defaultstore.hotUpdate({state:newState,mutations:newMutations,getters:newGetters})})}returnstore}我们还需要在main.js中修改：importVuefrom'vue'importAppfrom'./App.vue'importVuexfrom'vuex'importcreateStorefrom'./store/index.js'Vue.config。productionTip=falseVue.use(Vuex)conststore=createStore();newVue({store,render:h=>h(App)}).$mount('#app')结论以上，完成了Vuex的热替换功能。需要注意的是状态下是不能直接看到效果的！感谢您阅读。
