vue重度使用vuex和watch的解决方法

Question

项目中重度依赖vuex和watch，组件化非常方便，但是组件之间的数据、状态共享一直非常难处理，所以在使用了vuex后便重度依赖，并且大量使用了watch，在vue官网中一直不推荐使用watch，而是使用computed代替，但是现在也找不到一个合适的方法，下面用一个例子展示。a页面和b页面，b页面中有5段文字，点击文字后，a页面的数据会加上选择的数据，一直累加。类似现在的解决方法是，每次点击文字，通过commit修改state的变量，a页面使用watch监听state变量的变化，如果改变则添加上新的数据。代码使用了decorator和typescript//a页面的监听@Watch("content")   ChangeContent(x: string) {    if (!x) return;    this.text += this.content;   }//b页面发送  ChooseText(x: string) {    this.ChangeContent(x);   }//statecontent：null//mutationChangeContent（state，x）{     state.content=x } 其中代码有部分省略，但是无关紧要。其中方法还有部分逻辑没有写，比如2次选中相同数字，watch是不会执行。现在想知道除了使用watch能监听到变化，并执行相应逻辑，还有没有其他的方法。例如computed。这只是其中的一小部分，以后碰到像是这样的问题，代码的设计思路是什么。谢谢。

Answer 1

你这种需求，state 里存的应该是个数组，里边是被点击的元素（这里就可以直接做去重了）。

然后就不需要 watch 了，因为 state 里就是被点击的所有元素，计算属性中直接根据这个数组计算出文本返回即可。