vuex提交state&&實(shí)時監(jiān)聽state數(shù)據(jù)的改變方法

更新時間：2018年09月16日 12:59:29 作者：etemal_bright

今天小編就為大家分享一篇vuex提交state&&實(shí)時監(jiān)聽state數(shù)據(jù)的改變方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

項(xiàng)目背景

websocket長連接根據(jù)指示進(jìn)行四個頁面之間的跳轉(zhuǎn)，在各頁面執(zhí)行相應(yīng)的邏輯處理。

項(xiàng)目搭建結(jié)構(gòu)如下所示：

解決方案

在四個頁面外面寫個父頁面，router路徑如下所示：

vuex

\src\store\mutations.js

//存儲到vuex里面

[WEBSOCKETDATA](state,socketdata){
 state.socketData=null;//vue監(jiān)聽不到數(shù)組的改變 所以清空重置一下就好咯
 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數(shù)據(jù)
}

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發(fā)送數(shù)據(jù)
  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拿不到改變之后的數(shù)據(jù)
  console.log("index--------------------");
  console.log(this.socketData);
  },1000);
 },
 }

src\components\shoppingCart.vue

子頁面根據(jù)websocket傳來的數(shù)據(jù)進(jìn)行邏輯操作

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: {//監(jiān)聽socketData的變化 做頁面處理
  ...mapState([
  'socketData',
  ]),
  ...mapGetters([
  'getterSocketData',
  ])
 },
  watch:{
  getterSocketData(message){//message 就是socketData
  console.log(message);//根據(jù)數(shù)據(jù)指示 進(jìn)行邏輯操作
  ........................
  }
  }
}

以上這篇vuex提交state&&實(shí)時監(jiān)聽state數(shù)據(jù)的改變方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: