大佬们遇到过这个问题吗?Vue 简单状态管理Store模式下无法 watch 到改变后的数据

问题:使用Vue简单状态管理Store模式,组件中可以获取到store中的数据,在组件中通过事件改变store中的值,并提交到store后,在store中可以打印出改变后的值,但在组件中通过watch无法监听到最新值的变化
store.js
letstore={
state:{
message:'Hello!'
},
setMessageAction(newValue){
this.state.message=newValue
console.log('store.js-newValue:',this.state.message);//当组件改变数据后这里是可以获取到改变后的最新值的
},
}
exportdefaultstore
main.js中引入store
//简单store模式
importstorefrom'./store'
Vue.prototype.$store=store
组件中使用store
==============================分割线===================================
在asseek和夕水的提示下已经解决问题,下面是我实现的方法,有更好的方法请指出,谢谢:
两种解决方案:
使用Vue.observable在组件中可以直接调用state中的某个值
引用store.state对象组件中使用需要先把state赋值给组件中data选项
解决方案1:
修改store.js如下:state用observable定义来实现响应式
letstore={
state:Vue.observable({
message:'Hello!'
}),
setMessageAction(newValue){
this.state.message=newValue
console.log('store.js-newValue:',this.state.message);
},
}
exportdefaultstore
组件调用:
解决方案2:
store.js
letstore={
state:{
message:'Hello!'
},
setMessageAction(newValue){
this.state.message=newValue
console.log('store.js-newValue:',this.state.message);
},
}
exportdefaultstore
组件:
慕姐8265434
浏览 803回答 2
2回答

隔江千里

你的store.js只是个暴露个普通对象,是什么原因让你认为它是响应式的会被watch?你可以把state的数据用Vue.observable来处理一下,应该是可以的,没这么玩过,未实测
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript