vuex與websocket結合使用實現消息更新推送

 

項目描述：一個價格實時更新案例。每一次有人出價，服務端推送最新價格，通過websocket拿到最新價格，渲染到前臺頁面。

問題：1.如何在頁面刷新後還保持上一次最新價格的顯示

解決方法：

新建文件目錄store：並建立各個js文件

main.js中引入

import vuex from 'vuex'
import store from './store'

Vue.use(vuex);


new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

store文件下的index.js

import Vue from 'vue'
import Vuex from 'vuex'

import state from './state'
import mutations from './mutations'
import getters from './getters'
import actions from './actions'

Vue.use(Vuex);

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

state.js文件：

//存儲數據
const state={
    //推送消息
    imMessages:{}
};
export default state;

mutations.js

注意：在使用localStorage存值的時候注意值的類型，這個地方建議去看一下從vuex取出的值打印到前臺是什麼格式的。關於vuex取值的格式推薦博客：https://blog.csdn.net/qq_20757489/article/details/84930466。注意值的格式的轉換

const mutations= {
    //websocket初始化
    initWebsocket(state,itemId,userId){
        const wsUrl='websocket鏈接地址';
        const ws=new WebSocket(wsUrl);
        //建立連接
        ws.onopen=function () {
            let communicationMessage=new Socket.CommunicationMessage(null,itemId, userId, null, null);
            let dataContent=new Socket.DataContent(Socket.MsgActionEnum.CONNECT,communicationMessage,null);
            //調用send向服務器發送數據
            if(ws.readyState===1){
                ws.send(JSON.stringify(dataContent));
            }
        };
        //接收服務端消息
        ws.onmessage=function (e) {
            state.imMessages=JSON.parse(e.data);
            console.log('state中數據已更新');
            window.localStorage.setItem('imMsg',JSON.stringify(state.imMessages));
        };
        ws.close=function () {
            console.log('連接已斷開');
        }
    },
};
export default mutations;

getters.js

注意：1.從localStorage取值時格式問題。

          2.這個地方爲什麼要判斷？因爲第一次沒人出價，是原始價格，就不存在當前價格消息的推送。如果不判斷，在前臺取值時會報錯

const getter={
    //當前推送值
   getLocalData(state){
       if(state.imMessages){
           state.imMessage=JSON.parse(window.localStorage.getItem('imMsg'));
       }else{
           state.imMessage='';
       }
       return state.imMessage;
   }
    
};
export default getter;

item.vue頁面

 <div class="currentFlag" v-else-if="itemDetails.itemStatus==currentStatus">
                            <div class="countDown">
                                剩餘競價時間
                                <CountDown
                                        @start_callback="countDownS_cb(1)"
                                        @end_callback="countDownE_cb(1)"
                                        :currentTime="new Date().getTime()"
                                        :startTime="startTime"
                                        :endTime="endTime"
                                        :dayTxt="'天'"
                                        :hourTxt="'小時'"
                                        :minutesTxt="'分鐘'"
                                        :secondsTxt="'秒'">
                                </CountDown>
                            </div>
                            <div class="currentPrice">當前價：<span>{{updateLocalData?updateLocalData.extend.data.price:itemDetails.startPrice}}元</span></div>

 created() {
            //初始化websocket
            this.initSocket(this.itemId,null); 
        },
        computed:{
            //獲取推送消息內容
            updateLocalData(){
                return this.$store.getters.getLocalData;
            },
        },
        methods:{   
            //websocket初始化
            initSocket(itemId,userId){
                this.$store.commit('initWebsocket',itemId,userId)
            },
        },

注意：1.mutation中的方法要通過commit提交

          2.Vuex在組件中computed中使用的時候，計算屬性不能和state的數據項同名（同名了也不會報錯，就是獲取不了數據了）

總結：過程中細節點比較多，如數值格式轉化問題，computed和函數生命週期鉤子函數執行先後的問題，再就是不理解還是去看看官方文檔，很多細節解釋的很清楚