Vue 3中实现全局变量的供响应式共享并watch动态监听全局变量

在Vue 3中，可以使用createApp函数创建Vue实例，然后使用provide和inject来实现全局变量的共享。

使用provide和inject可以共享普通的JavaScript对象和变量，但是当我们需要共享响应式对象时，需要使用reactive方法来创建响应式对象。具体实现如下：

main.js

import { createApp, reactive } from 'vue'
import App from './App.vue'

const app = createApp(App)

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

app.provide('globalVars', globalVars)

app.mount('#app')

页面1

在需要改变全局变量的组件中使用inject方法获取响应式对象，并在需要的时候改变它：

import { inject } from 'vue'

export default {
  setup() {
    const globalVars = inject('globalVars')

    function handleClick() {
      globalVars.var1 = 'new value'
    }

    return {
      handleClick
    }
  }
}

页面2

在需要监听全局变量的组件中同样使用inject方法获取响应式对象，并使用watch方法来监听它的变化：

import { inject, watch } from 'vue'

export default {
  setup() {
    const globalVars = inject('globalVars')

    watch(() => globalVars.var1, (newValue) => {
      // 更新自己的状态
    })

    return {
      // ...
    }
  }
}```