uni-app全局使用websocket收发数据

在上一篇《uniapp全局使用websocket》中有人提出没有写websocket接收数据，现在继续完善优化一下我们store文件夹底下的index.js文件，代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        socketTask: null,
        websocketData: {}, // 存放从后端接收到的websocket数据
    },
    mutations: {
        setWebsocketData (state, data) {
            state.websocketData = data
        }
    }, 
    actions: {
        websocketInit ({ state, dispatch }, url) {
            state.socketTast = uni.connectSocket({
                url, // url是websocket连接ip
                success: () => {
                    console.log('websocket连接成功！')
                },
                fail: e => {
                    console.log('连接失败' + e)
                }
            })
            state.socketTast.onOpen(() => dispatch('websocketOnOpen'))
            state.socketTast.onMessage(res => dispatch('websocketOnMessage', res))
            state.socketTast.onClose(e => dispatch('websocketOnClose'))
            state.socketTast.onError(e => dispatch('websocketOnError'))
        },
        websocketOnOpen ({ commit }) {
            console.log('WebSocket连接正常打开中...！')
        },
        // 收到数据
        websocketOnMessage ({ commit }, res) {
            console.log('收到服务器内容：' + res.data)
            if (res.data !== '连接成功') {
                commit('setWebsocketData', (res && JSON.parse(res.data) || null))
            }
        },
        websocketOnClose ({ commit, dispatch }) {
            console.log('WebSocket连接关闭')
        },
        websocketOnError ({ commit, dispatch }) {
            console.log('WebSocket连接错误')
        },
        websocketClose ({ state }) {
            if (!state.socketTast) return
            state.socketTast.close({
                success (res) {
                    console.log('关闭成功', res)
                },
                fail (err) {
                    console.log('关闭失败', err)
                }
            })
        },
        // 发送数据
        websocketSend ({ state }, data) {
            uni.sendSocketMessage({
                data,
                success: res => {
                    console.log('发送成功', res)
                },
                fail: e => {
                    console.log('发送失败', e)
                }
            })
        }
    }

})

export default store

在任意页面都可以全局使用，初始化websocket：

this.$store.dispatch('websocketInit', 'websocket ip')

发送websocket数据：

this.$store.dispatch('websocketSend', '发送的数据')

关闭websocket连接：

this.$store.dispatch('websocketClose')

需要使用接收到的websocket数据就在任意页面调用this.$store.state.websocketData即可。

本文主要还修改了websocket相关方法的位置，从mutations统一都移到了actions，以上涉及到vuex的使用就不在赘述了，具体可以看我另一篇博客《Vuex学习笔记》，有问题可以评论指出