我们通过vuex
来实现全局状态管理,uniapp
中内置了vuex
,可以直接引入使用。
在根目录下新建store
文件夹,在底下建一个index.js
,代码如下:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
socketTask: null
},
mutations: {
WEBSOCKET_INIT (state, url) {
state.socketTask = uni.connectSocket({
url, // url是websocket连接ip
success () {
console.log('websocket连接成功')
}
})
state.socketTask.onOpen((res) => {
console.log('WebSocket连接正常打开中...!')
// 注:只有连接正常打开中 ,才能正常收到消息
state.socketTask.onMessage(res => {
console.log('收到服务器内容:' + res.data)
});
})
},
WEBSOCKET_SEND (state, data) {
state.socketTask.send({
data,
async success() {
console.log('消息发送成功')
},
})
},
CLOSE_SOCKET (state) {
if (!state.socketTask) return
state.socketTask.close({
success (res) {
console.log('关闭成功', res)
},
fail (err) {
console.log('关闭失败', err)
}
})
}
},
actions: {
WEBSOCKET_INIT({
commit
}, url) {
commit('WEBSOCKET_INIT', url)
},
WEBSOCKET_SEND({
commit
}, data) {
commit('WEBSOCKET_SEND', data)
},
CLOSE_SOCKET({
commit
}) {
commit('CLOSE_SOCKET')
}
}
})
export default store
然后在根目录的main.js
文件开头引入:
import store from './store'
再在vue
上挂载:
Vue.prototype.$store = store
const app = new Vue({
...App,
store
})
在任意页面都可以全局使用,初始化websocket
:
this.$store.dispatch('WEBSOCKET_INIT', 'websocket ip')
发送websocket
数据:
this.$store.dispatch('WEBSOCKET_SEND', '发送的数据')
关闭websocket
连接:
this.$store.dispatch('CLOSE_SOCKET')