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


Posted in Javascript onSeptember 16, 2018

项目背景

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

项目搭建结构如下所示:

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

解决方案

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

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

vuex

\src\store\mutations.js

//存储到vuex里面

[WEBSOCKETDATA](state,socketdata){
 state.socketData=null;//vue监听不到数组的改变 所以清空重置一下就好咯
 state.socketData=socketdata
 }

\src\store\getters.js

export default {
 getterSocketData (state) {
 return state.socketData
 }
}

\src\store\index.js

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import getters from './getters'

Vue.use(Vuex)

const state = {
 socketData:{},//websocket数据
}

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

\src\components\index.vue

父页面

import {mapMutations,mapState} from 'vuex'
export default {
 computed:{
   ...mapState([
   'socketData',
   ])
  },
 data(){
  return{
  skip:'2',
  webdata:{
   "current_item": "111", "show_item": 'false', "cart_item_list": [],"totalPrice":7.5,"delIndexList":[],'addList':[]
  },
  }
 },
 mounted(){
  // this.initWebsocket()
  var addList=[{"sku":"1","num":"2","price":3.5,"name":'苹果0'}];
  var delIndexList=[];
  this.webdata.addList=addList;
  this.webdata.delIndexList=delIndexList;
  this.websocket_data(this.webdata)
  console.log("index1--------------------")
  console.log(this.socketData);
  setTimeout(()=>{//定时器为了模拟websocket发送数据
  var addList=[{"sku":"1","num":"2","price":3.5,"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);
 },
 }

src\components\shoppingCart.vue

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

import {mapState,mapMutations,mapGetters} from 'vuex';
export default {
 data(){
  return{
  prolength:0,
  defaultImg: 'this.src="' + require('../assets/defaultImg.png') + '"',
  productinfos: {
   "current_item": "111", "show_item": 'false', "cart_item_list": [],"totalPrice":7.5,"delIndexList":[],'addList':[]
  },
  MyMar:'',
  }
 },
 computed: {//监听socketData的变化 做页面处理
  ...mapState([
  'socketData',
  ]),
  ...mapGetters([
  'getterSocketData',
  ])
 },
  watch:{
  getterSocketData(message){//message 就是socketData
  console.log(message);//根据数据指示 进行逻辑操作
  ........................
  }
  }
}

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

Javascript 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
基于jquery DOM写的类似微博发布的效果
Oct 20 Javascript
js动画(animate)简单引擎代码示例
Dec 04 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
node.js中的fs.statSync方法使用说明
Dec 16 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
jQuery UI制作选项卡(tabs)
Dec 13 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
vue小白入门教程
Apr 02 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 #Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 #Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 #Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 #Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 #Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 #Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
Sep 16 #Javascript
You might like
php数组(array)输出的三种形式详解
2013/06/05 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
Python 不同对象比较大小示例探讨
2014/08/21 Python
解析Python中的异常处理
2015/04/28 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
Python sep参数使用方法详解
2020/02/12 Python
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
优秀班主任经验交流材料
2014/06/02 职场文书
企业口号大全
2014/06/12 职场文书
党员个人年度总结
2015/02/14 职场文书
2015年党建工作总结
2015/03/30 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题