Vuex的热更新

在使用vuex的时候，发现修改一个地方，页面都要刷新，非常不方便，数据状态丢失，所以查了资料使用热更新功能，发现很好用，分享如下
使用方法

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
import defaultState from './state/state'
import mutations from './mutations/mutations'
import getters from './getters/getters'
import actions from './actions/actions'
const  isDev = process.env.NODE_ENV == 'devement'
export default ()=>{
const store= new Vuex.Store({  //不能return返回啦 切记
        strict:true, // 开发环境用 不能直接修改state中的数据  必须提交mutation去修改才可以 
        state:defaultState,
        mutations,
        getters,
        actions,
        modules:{
            a:{
                //namespaced:true,  //单独模块命名空间为真  名字可以一样
                state:{
                    text:100
                },
                mutations:{
                    updateText(state,text){
                        state.text= text;
                    }
                }
            },
            b:{
                state:{
                    text:250
                }
            }
        }
    })

    //热更替功能 不用每次刷新页面 
    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;  //这里返回才可以哦
}

最后效果如下

image.png