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 里就是被点击的所有元素，计算属性中直接根据这个数组计算出文本返回即可。