Vue3 响应式全局对象

项目需求 实现一个 响应式全局对象，在A模板页修改全局对象 ，在B模板页中自动响应改变为新值

 main.js

 全局对象  globalVars 

import { createApp } from 'vue'
import { reactive } from 'vue'

import App from './App.vue'
import axios from 'axios'
 
const app = createApp(App);
app.config.globalProperties.$axios = axios;

const globalVars = reactive({
    var1: 'value1',
    var2: 'value2'
  })
  
app.provide('globalVars', globalVars)

app.mount('#app');

 

模板页 FootComponent.vue 

用于改变 全局对象  globalVars 中 var1 的值

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

export default {
  // 组件名称
  name: 'FootComponent',
  setup() {
    // 注入全局对象
    const globalVars = inject('globalVars')
    return {
      globalValue,
      handleClick
    };

    function handleClick() {
      console.log("原："+globalVars.var1);
      globalVars.var1 = 'new value';
      console.log("改后："+globalVars.var1);
    }
  },

<a href="javascript:;" class="IndConFa flexC fl-cen" 
v-on:click="handleClick()" ><p>{{ globalValue }}点击改变全局对象</p></a>

 

模板页 SoftComponent.vue 

用于显示

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

export default {
  // 组件名称
  name: 'SoftPhoneComponent',
  data() {
        return {
            global_var:"",    
        }
    },
  setup() {
    // 注入全局对象
    const globalVars = inject('globalVars');

    watch(() => globalVars.var1, (newValue) => {
        // 更新自己的状态
        globalVars.var1=newValue;
        console.log("watch "+newValue);    
    })
    
    return {
        globalValue,
        globalVars
    };

  },

显示

<a href="javascript:;" class="IndPhone flexC fl-cen">
<p>90021<br>全局变量{{ globalVars.var1 }} <br></p></a>

 

另外如果想在 mian.js 的函数中访问这个全局对象

是不能加 this. 的 而且这个函数要在 定义合局变量的后面写

例如

//改变全局对象
function websocket_resMsg_extTelStatus(msg){

       globalVars.var1 = msg;

}