vuex中,我在index.vue组件设置的值,为什么在另外一个组件crumb.vue获取不到

Question

题目描述
我在index.vue文件中通过this.$store.dispatch设置了state的值,然后我在另外一个组件crumb中通过this.$store.state获取不到设置的值
题目来源及自己的思路
相关代码
index.vue
asyncmounted(){
letself=this
console.log(self.$store.state.geo.position);//数据为空
//设置当前城市和省份
self.$store.dispatch(
"geo/setPosition",
{
city:window.localStorage.getItem("currentCity"),
province:window.localStorage.getItem("currentPro")
}
);
console.log(self.$store.state.geo.position);//有数据
crumb.vue
computed:{
city(){
returnthis.$store.state.geo.position.city;
}
},
crumb.vue的html结构中使用
{{city}}//为空
geo.js
conststate=()=>({
position:{}
});
constmutations={
setPosition(state,val){
state.position=val;
}
};
constactions={
setPosition:({commit},position)=>{
commit("setPosition",position);
}
};
exportdefault{
namespaced:true,
state,
mutations,
actions
};
index.js
importVuefrom"vue";
importvuexfrom"vuex";
importgeofrom"./modules/geo";
Vue.use(vuex);
conststore=()=>
newvuex.Store({
modules:{
geo,
},
});
exportdefaultstore
求大神指点指点!

Answer 1

在你的mutation中是直接进行对象赋值的，这种情况vue会获取不到改动导致双向绑定失效，试试在mutation里用vue提供的set方法来更新state里的数据。