在使用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