使用websocket通过vuex来存储数据

使用vuex需要遵守的规则

1.应用层级的状态应该集中到单个 store 对象中。
2.提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
3.异步逻辑都应该封装到 action 里面。

在做vuex时请熟记以上的3条规则！非常重要！！

代码

这边vuex用了module管理代码，内容如下：

const state = {
    websock: null,	//websock变量
    eventlist:null,	//onmessage 返回的数据
};

// getters.js
const getters = {
    eventlist(state) {
        return state.eventlist;
    },
    websock(state) {
        return state.websock;
    },
};

// mutations 进行数据状态的变化
const mutations = {
    //申明并连接websocket，
    //在mutation也能定义websocket的一些方法，但是在vuex严格模式下，异步处理数据浏览器会抛出错误。所以只是申明了websocket
    WEBSOCKET_INIT(state,url){
        state.websock = new WebSocket(url)
    },
    //将接收到的数据赋值
    WEBSOCKET_REIVE(state, data) {
        state.eventlist = data;
    }
};

// actions 改变状态的操作
const actions = {
    WEBSOCKET_INIT({commit},url){
        commit('WEBSOCKET_INIT',url);
        state.websock.onopen = function () {
            console.log("连接成功！");
        };
        state.websock.οnerrοr=function(e) { //错误
            console.log("ws错误!");
            console.log(e);
        };
        //websocket与后端链接的数据，为异步链接的方式！
        state.websock.onmessage = function (callBack) {
            // console.log("ws接收",callBack.data);
            //后端返回的数据，在mutations内进行修改
            commit('WEBSOCKET_REIVE', callBack.data);
        };
    },
    //发送消息
    WEBSOCKET_REIVE({commit}, data) {
        let _msg = JSON.stringify(data);
        state.websock.send(_msg);
    }
};
export default  {
    state,
    getters,
    actions,
    mutations
}

在页面申明websocket代码

这里使用dispatch，调用action内的方法，开始websocke的链接

 let _userId = this.$store.getters.currentUser.userId;
 this.$store.dispatch('WEBSOCKET_INIT',"ws://10.254.10.68:8086/websocket/" + _userId)

页面需要发送消息时引用以下代码！

this.$store.dispatch("WEBSOCKET_REIVE",data);

引用vuex内的变量

watch: {
        websockMsg: function (n, o) {
            if (n !== o && n) {
                let _data = JSON.parse(n);
                //根据数据的变化做出相应的处理
                this.messageList.push(_data);
            }
        },
    },
computed:{
        websockMsg() {
            return this.$store.getters.eventlist;
        }
    },

websocket的onmessage数据处理算是最主要的问题了，只要了解vuex的异步处理和同步处理的逻辑，放在正确的位置就可以了，清明节时，无聊实现的有不足的欢迎交流。