vue3 watch 监听响应式数据变化 改变img的src

目标：用一个图片来监视全局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;

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>