目标：用一个图片来监视全局websocket对象的连接状态
全局websocket的写法详见：https://www.cnblogs.com/hailexuexi/p/17577818.html
main.js
全局对象 websocket的连接状态
//全局对象
const globalData=reactive({
websockStatus:"open",
})
app.provide('globalData', globalData);websocket 的 连接成功 ，连接失败，连接关闭 函数 中赋值
function websocketonopen(){ //连接建立
console.log("连接建立成功" );
globalData.websockStatus="open";
}
function websocketonerror(){//连接建立失败重连
console.log('连接建立失败');
globalData.websockStatus="close";
}
function websocketclose(e){ //关闭
console.log('断开连接',e);
globalData.websockStatus="close";
}HeaderComponent.vue 模板页
动态绑定src
<img id="imgWebSocketStatus" v-bind:src="png_url"></a>用于响应式的变量的写法。 直接赋值是不起作用的，也不报错。
定义： let png_url = ref("");
赋值：png_url.value= png_url_open;
取值： console.log("已连接============"+png_url.value);
src的相对目录问题，用require函数
const png_url_open=require('../assets/images/icon/Hdi01.png');js代码
<script>
// 在子组件中注入全局对象
import { ref,inject, watch } from 'vue';
export default {
// 组件名称
name: 'HeaderComponent',
setup() {
// 注入全局对象
const globalData = inject('globalData');
let png_url = ref("");
const png_url_open=require('../assets/images/icon/Hdi01.png');
const png_url_close=require('../assets/images/icon/Hdi02.png');
//监听全局对象 数据的变化
watch(() => globalData.websockStatus, (newValue) => {
// 更新 状态
globalData.websockStatus=newValue;
console.log("websockStatus "+globalData.websockStatus);
if(globalData.websockStatus=="open"){
png_url.value= png_url_open;
console.log("已连接============"+png_url.value);
}else{
png_url.value=png_url_close;
console.log("断开连接============"+png_url.value);
}
})
return {
globalData,
png_url,
png_url_open,
png_url_close
};
},
}
</script>