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

Question

题目描述我在index.vue文件中通过this.$store.dispatch设置了state的值,然后我在另外一个组件crumb中通过this.$store.state获取不到设置的值题目来源及自己的思路相关代码index.vueasyncmounted(){letself=thisconsole.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.vuecomputed:{city(){returnthis.$store.state.geo.position.city;}},crumb.vue的html结构中使用{{city}}//为空geo.jsconststate=()=>({position:{}});constmutations={setPosition(state,val){state.position=val;}};constactions={setPosition:({commit},position)=>{commit("setPosition",position);}};exportdefault{namespaced:true,state,mutations,actions};index.jsimportVuefrom"vue";importvuexfrom"vuex";importgeofrom"./modules/geo";Vue.use(vuex);conststore=()=>newvuex.Store({modules:{geo,},});exportdefaultstore求大神指点指点!

Answer 1

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