Vue3 响应式全局对象

需求在 main.js 中 创建一个 响应式全局对象 。改变这个全局对象时 ，子组件应同步响应。

效果：这几个标签框 绑定的全局对象json

main.js

定义 响应式全局对象

//全局对象
const globalData=reactive({
    extTelMonitorData: [
    {
        title: '用户组一',
            list: [
                {
                    groupID: "0",
                    groupName: "All Users",
                    userDomain: "equiinet.cn",
                    userExten: "1000",
                    userID: "1",
                    userName: "刘亦菲",
                    isRegister: false,
                    callStatus:""
                },
                {
                    groupID: "0",
                    groupName: "All Users",
                    userDomain: "equiinet.cn",
                    userExten: "1001",
                    userID: "2",
                    userName: "娜然",
                    isRegister: false,
                    callStatus:""
                },
                {
                    groupID: "0",
                    groupName: "All Users",
                    userDomain: "equiinet.cn",
                    userExten: "1002",
                    userID: "3",
                    userName: "佟丽娅",
                    isRegister: false,
                    callStatus:""
                },
                {
                    groupID: "0",
                    groupName: "All Users",
                    userDomain: "equiinet.cn",
                    userExten: "1003",
                    userID: "3",
                    userName: "迪丽热巴",
                    isRegister: false,
                    callStatus:""
                }
                ]
            },
            {
                title: '用户组二',
                list: [
                {
                    userName: '张三',
                    number: 1003,
                    isRegister: false 
                },
                {
                    userName: '王一',
                    number: 1005,
                    isRegister: false 
                } 
            ]
            },
            {
                title: '用户组三',
                list: [
                {
                    userName: '刘中',
                    number: 1006,
                    isRegister: false 
                },
                {
                    userName: '李毅',
                    number: 1007,
                    isRegister: false 
                } 
                ]
            },
            {
                title: '全部分机',
                list: [
                {
                    userName: '李安',
                    number: 1008,
                    isRegister: false 
                },
                {
                    userName: '李毅',
                    number: 1009,
                    isRegister: false 
                    }
                ]
            }
    ] 
    ,
    var2: 'value2'
})
app.provide('globalData', globalData);
 

main.js 中的函数 改变 全局对象 globalData.extTelMonitorData

function websocket_resMsg_extTelStatus(msg){
   //globalData.extTelMonitorData=JSON.parse(msgExtTelStatus);
    //将字符串转为json对象
    globalData.extTelMonitorData=eval('('+msgExtTelStatus+')');
    console.log('收到  '+ msgExtTelStatus);
}

 子组件 ExtTelStatusComponent

<template>
<div class="IndConB flex" id="divExtTelStatus1"> 
    <el-row :gutter="74"  v-for="(dataItem, index) in globalData.extTelMonitorData[0].list" :key="index">
        <el-col :span="8">  
            <div style="width:190px;">
            <a href="javascript:;" class="IndCona"  >
                <div class="IndConaH flexC Huans" style="width:95%;"><img src="../assets/images/pic/phone01.png">
                    <p  >&nbsp;&nbsp;&nbsp;{{dataItem.userExten}}</p></div>
                <div class="IndConaP" style="width:95%;">
                    <div class="IndConaPz Huans">名称: {{dataItem.userName}}</div>
                    <div class="IndConaPz Huans">状态: {{dataItem.callStatus}}</div>
                </div>
                <div class="IndConaF flexC fl-cen" style="width:95%;"><img src="../assets/images/pic/tanhao.png">
                    <p>{{dataItem.isRegister}}</p></div>
                
                <div class="IndConaD Huans">
                    <p>名称 : 调度电话</p>
                    <p>号码 : {{dataItem.userExten}}</p>
                    <p>状态 : {{dataItem.isRegister}}</p>
                    <p>分区 : {{dataItem.groupID}}</p>
                    <p>终端 : {{dataItem.userDomain}}</p>
                </div>
            </a>
            </div>
        </el-col>
        &nbsp;
    </el-row> 
    <a href="javascript:;" class="IndConFa flexC fl-cen" v-on:click="foot_calltel()"><p>测试一下</p></a>
</div>
</template>

<script>
// 在子组件中注入全局对象
import { inject, watch } from 'vue'

export default {
  // 组件名称
    name: 'ExtTelStatusComponent',
    data() {
        return {
 　　　　　　
　　　　　　　　extensionMonitorDataA: [
　　　　　　　　{
　　　　　　　　　　title: '用户组一',
　　　　　　　　　　list: [
　　　　　　　　　　{
　　　　　　　　　　　　groupID: "0",
　　　　　　　　　　　　groupName: "All Users",
　　　　　　　　　　　　userDomain: "equiinet.cn",
　　　　　　　　　　　　userExten: "1000",
　　　　　　　　　　　　userID: "1",
　　　　　　　　　　　　userName: "11111",
　　　　　　　　　　　　isRegister: false,
　　　　　　　　　　　　callStatus:""
　　　　　　　　　　},
　　　　　　　　　　{
　　　　　　　　　　　　groupID: "0",
　　　　　　　　　　　　groupName: "All Users",
　　　　　　　　　　　　userDomain: "equiinet.cn",
　　　　　　　　　　　　userExten: "1001",
　　　　　　　　　　　　userID: "2",
　　　　　　　　　　　　userName: "22222",
　　　　　　　　　　　　isRegister: false,
　　　　　　　　　　　　callStatus:""
　　　　　　　　　　}
　　　　　　　　]
　　　　　　　　} 
　　　　　　　] 
        };
    },
    setup() {
        // 注入全局对象
　　　　const globalData = inject('globalData');
 
        watch(() => globalData.extTelMonitorData, (newValue) => {
            // 更新 
            globalData.extTelMonitorData=newValue;
            console.log("ExtTelStatusComponent watch "+globalData.extTelMonitorData[0].list);    
        })

return {
            globalData,
            handleClick
        };

        function handleClick() {
         
        }
  },

  mounted() {
      
   },
  methods: {
        foot_calltel(){
            console.log("foot_calltel "+ "");   
            this.globalData.extTelMonitorData=this.extensionMonitorDataA;
        }
 
    }
    
}
</script>