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

项目中重度依赖vuex和watch,组件化非常方便,但是组件之间的数据、状态共享一直非常难处理,所以在使用了vuex后便重度依赖,并且大量使用了watch,在vue官网中一直不推荐使用watch,而是使用computed代替,但是现在也找不到一个合适的方法,下面用一个例子展示。

a页面和b页面,b页面中有5段文字,点击文字后,a页面的数据会加上选择的数据,一直累加。类似
https://img2.mukewang.com/5c5ee5890001a92b02430222.jpg

现在的解决方法是,每次点击文字,通过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。这只是其中的一小部分,以后碰到像是这样的问题,代码的设计思路是什么。谢谢。


繁星点点滴滴
浏览 924回答 1
1回答

PIPIONE

上述说的例子是个简单的父子组件通信,没必要用vuex
打开App,查看更多内容
随时随地看视频慕课网APP