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 相关文章推荐
JS日历 推荐
Dec 03 Javascript
jquery 双色表格实现代码
Dec 08 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
关于js数组去重的问题小结
Jan 24 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
layui数据表格重载实现往后台传参
Nov 15 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
SONY ICF-F10中波修复记
2021/03/02 无线电
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
jquery JSON的解析方式
2009/07/25 Javascript
拥抱模块化的JavaScript
2012/03/07 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
通过构造函数实例化对象的方法
2017/06/28 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
python直接访问私有属性的简单方法
2016/07/25 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
解决uWSGI的编码问题详解
2017/03/24 Python
python中如何正确使用正则表达式的详细模式(Verbose mode expression)
2017/11/08 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
Python实现冒泡排序的简单应用示例
2017/12/11 Python
简单了解python代码优化小技巧
2019/07/08 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
python列表推导式入门学习解析
2019/12/02 Python
Python assert关键字原理及实例解析
2019/12/13 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
产品销售员岗位职责
2013/12/18 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
相亲活动方案
2014/08/26 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
1000字打架检讨书
2014/11/03 职场文书
检讨书大全
2015/01/27 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
地球上的星星观后感
2015/06/02 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL