vue3全局变量监听 页面刷新后全局变量消失

在Vue 3中，可以使用Vue的响应式系统来实现全局变量的监听。Vue 3中引入了一个新的API `reactive`，它可以将一个普通的JavaScript对象转换为响应式对象。通过将全局变量定义为一个响应式对象，就可以在页面刷新后保留全局变量的值。

下面是一个示例代码，演示了如何在Vue 3中实现全局变量的监听：

// main.js
import { createApp, reactive } from 'vue';

const globalState = reactive({
  count: 0,
});

const app = createApp(App);
app.config.globalProperties.$globalState = globalState;
app.mount('#app');

在上述代码中，我们创建了一个名为`globalState`的响应式对象，并将其定义为Vue应用的全局属性`$globalState`。这样，在整个应用中都可以通过`this.$globalState`来访问和修改全局变量。

然后，在组件中可以通过以下方式使用全局变量：

<template>
  <div>
    <p>Count: {{ $globalState.count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$globalState.count++;
    },
  },
};
</script>

在上述代码中，我们通过`this.$globalState.count`来访问全局变量，并在按钮的点击事件中对其进行修改。

当页面刷新时，全局变量`$globalState`的值会被保留，因为它是在Vue应用的根实例中定义的。这样就可以实现全局变量的持久化。