加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

vuex提交state&&实时监听state数据的改变方法

发布时间:2020-12-16 23:33:26 所属栏目:百科 来源:网络整理
导读:项目背景 websocket长连接 根据指示进行四个页面之间的跳转,在各页面执行相应的逻辑处理。 项目搭建结构如下所示: 解决方案 在四个页面外面写个父页面,router路径如下所示: vuex srcstoremutations.js //存储到vuex里面 srcstoregetters.js srcs

项目背景

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

项目搭建结构如下所示:

解决方案

在四个页面外面写个父页面,router路径如下所示:

vuex

srcstoremutations.js

//存储到vuex里面

srcstoregetters.js

srcstoreindex.js

Vue.use(Vuex)

export default new Vuex.Store({
state,mutations,getters
})

srccomponentsindex.vue

父页面

{//定时器为了模拟websocket发送数据 var addList=[{"sku":"1","name":'苹果11'}]; var delIndexList=[0]; this.webdata.addList=addList; this.webdata.delIndexList=delIndexList; this.$store.commit("websocket_data",this.webdata)//必须写 要不然getter拿不到改变之后的数据 console.log("index--------------------"); console.log(this.socketData); },1000); },}

srccomponentsshoppingCart.vue

子页面 根据websocket传来的数据进行逻辑操作

以上这篇vuex提交state&&实时监听state数据的改变方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读