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 相关文章推荐
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
使用js实现的简单拖拽效果
Mar 18 Javascript
有关Promises异步问题详解
Nov 13 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
js和jquery中获取非行间样式
May 05 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
微信小程序实现授权登录
May 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
学习使用PHP数组
2006/10/09 PHP
打造计数器DIY三步曲(上)
2006/10/09 PHP
PHP和XSS跨站攻击的防范
2007/04/17 PHP
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
php文件上传类完整实例
2016/05/14 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
$.extend 的一个小问题
2015/06/18 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
微信小程序页面传值实例分析
2017/04/19 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
2020/05/13 Javascript
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
python如何生成网页验证码
2018/07/28 Python
python 对key为时间的dict排序方法
2018/10/17 Python
python区块及区块链的开发详解
2019/07/03 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
python3获取当前目录的实现方法
2019/07/29 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
python语言的优势是什么
2020/06/17 Python
详解python tkinter 图片插入问题
2020/09/03 Python
浅析HTML5 Landmark
2020/09/11 HTML / CSS
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
学雷锋志愿服务月活动总结
2014/03/09 职场文书
任命书范本大全
2014/06/06 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
集结号观后感
2015/06/08 职场文书