在使用vuex的時(shí)候上祈，發(fā)現(xiàn)修改一個(gè)地方，頁(yè)面都要刷新浪藻，非常不方便捐迫，數(shù)據(jù)狀態(tài)丟失，所以查了資料使用熱更新功能爱葵，發(fā)現(xiàn)很好用施戴，分享如下
使用方法
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, // 開發(fā)環(huán)境用 不能直接修改state中的數(shù)據(jù) 必須提交mutation去修改才可以
state:defaultState,
mutations,
getters,
actions,
modules:{
a:{
//namespaced:true, //單獨(dú)模塊命名空間為真 名字可以一樣
state:{
text:100
},
mutations:{
updateText(state,text){
state.text= text;
}
}
},
b:{
state:{
text:250
}
}
}
})
//熱更替功能 不用每次刷新頁(yè)面
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
