vuex提交状态实时监听状态数据的改变方法

项目背景

求转发到长连接根据指示进行四个页面之间的跳转，在各页面执行相应的逻辑处理。

项目搭建结构如下所示：

解决方案

在四个页面外面写个父页面路由器路径如下所示：

状态管理

\ src \商店\企业。射流研究…

//存储到状态管理里面

[WEBSOCKETDATA](state，Socketdata){ state。Socketdata=null//vue监听不到数组的改变所以清空重置一下就好咯国家。socket data=Sockett data } \ src \ store \ getter s . js

导出默认{ getsocket data(state){ return state。socketdata } } \ src \ store \ index。射流研究…

从“vue”导入某视频剪辑软件从“vuex”导入状态管理从"导入突变"。/突变"导入"的吸气剂./getters'Vue.use(Vuex)

const state={ socketData: {，//websocket数据}导出默认的新Vuex .存储({ state，突变，getter })\ src \ components \ index。某视频剪辑软件

父页面

从“vuex”导入{地图突变，mapState}导出默认值{ computed: {.mapState([ 'socketData '，]) }，data(){ return { skip : ' 2 }，web data : { ' current _ item ' : ' 111 '，' show_item': 'false '，' cart_item_list': []，' totalPrice':7.5 '，' DeLindeList ' :[]，}，mounted(){ //this.initWebsocket()。苹果0'}];var DeLindelist=[]；这个。网络数据。addList=addList这个。网络数据。脱单=脱单；这个。web socket _ data(这。web数据)控制台。日志('索引1-')控制台。日志(这个。socket data)；setTimeout(()={//定时器为了模拟求转发到发送数据var addList=[{'sku':'1 '，' num':'2 '，' price':3.5，' name': '苹果11'}];var DeLindelist=[0]；这个。网络数据。addList=addList这个。网络数据。DeLindeList=DeLindeList这个$store.commit('websocket_data '，this.webdata)//必须写要不然吸气剂拿不到改变之后的数据控制台。日志(' index-')；控制台。日志(这个。socket data)；},1000);}，} src \组件\购物车。某视频剪辑软件

子页面根据求转发到传来的数据进行逻辑操作

从vuex '导入地图状态突变，mapgetter }；导出默认值{ data(){ return{ prolength:0，defaultimg : ' this。src=' http : '需要('./assets/defaultImg.png)' ' '，product infos : { ' current _ item ' : ' 111 '，' show_item': 'false '，' cart_item_list': []，' totalPrice':7.5 '，' delIndexList':[]，' addList':[] }，MyMar: ' '，}，computed: {//监听socketData的变化做页面处理.mapState([ 'socketData '，])，mapgetter([' getterSocketData '，]) }，watch : { getterSocketData(message){//message就是socketData console.log(消息);//根据数据指示进行逻辑操作...} }}以上这篇状态管理提交状态实时监听状态数据的改变方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。