Vue 简单状态管理Store模式下无法 watch 到改变后的数据

Question

问题：使用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}}changeStoreexportdefault{data(){return{message:''}},created(){this.message=this.$store.state.message},watch:{'$store.state.message':function(newVal){//watch无法获取组件改变后的新值console.log(newVal);console.log(this.$store.state.message);}},methods:{change(){this.$store.setMessageAction('changehelloworld')}},}==============================分割线===================================在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}}changeStoreexportdefault{data(){return{num:0}},computed:{msg(){returnthis.$store.state.message;}},methods:{change(){this.$store.setMessageAction(this.num++)}},}解决方案2：store.jsletstore={state:{message:'Hello!'},setMessageAction(newValue){this.state.message=newValueconsole.log('store.js-newValue:',this.state.message);},}exportdefaultstore组件：{{msg}}changeStoreexportdefault{data(){return{state:'',num:0}},created(){//注意：这里需要赋值state对象，而不能直接赋值对象中的某个值，否则不能触发响应式this.state=this.$store.state},computed:{msg(){returnthis.$store.state.message;}},methods:{change(){this.$store.setMessageAction(this.num++)}},}

Answer 1

你的store.js只是个暴露个普通对象，是什么原因让你认为它是响应式的会被watch？你可以把state的数据用Vue.observable来处理一下，应该是可以的，没这么玩过，未实测