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