在项目开发过程中,我们项目组采用vue组件化的前端开发模式,前期由于整体业务逻辑及页面设计相对简单,页面组件之间的通信采用props传值、$on/$emit事件传递的方式进行。随着后期业务逻辑的愈发复杂,组件嵌套层级逐渐增多,原来组件之间的通信方式显得越来越麻烦及难以维护。所有,项目组调整了整体组件及页面架构,并统一采用vuex进行通信。
但是,在使用过中,经常碰到一个问题,就是当store中的某个状态发生改变时,经常需要主动去触发已监听这个状态的组件中的某个事件或者主动去改变组件中的某个数据。比如A组件监听了store中的A-State这个属性,当A-State这个状态改变时,需要主动去触发A组件中的setXXX方法。现在我们采用的是computed跟watch两个方法配合去实现的,不知道这样是否是合适的方式,是否有更合理的解决方案,希望各位大大赐教。
在使用vuex的过程中,我们目前采用的就是如下的方式去解决问题,store设计代码如下:

点位展示列表组件中的使用方式如下:

页面中,包含一个组件A,组件A中会通过一系列操作生成一组数据,这组数据需要通过调用store中的setCameraSearchData去触发store状态更新,A组件监听到store的变化去触发某个需要触发的事件。