vue创建全局变量并监听

要在Vue中创建全局变量，可以使用Vue.prototype，这样在所有组件中都可以访问它。下面是一个示例：

// main.js

import Vue from 'vue'

Vue.prototype.$globalVar = 'Hello World'

new Vue({
  el: '#app',
  render: h => h(App)
})

在上面的示例中，我们创建了一个全局变量 `$globalVar`，并将其设置为 `'Hello World'`。接下来，在所有组件中，我们都可以通过 `this.$globalVar` 访问该变量。

同时，我们可以使用Vue的`$watch`方法来监听全局变量的变化，如下所示：

// App.vue

export default {
  mounted() {
    this.$watch('$globalVar', newVal => {
      console.log('Global variable changed to:', newVal)
    })
  }
}

在上面的示例中，我们在 `mounted` 钩子中使用 `$watch` 方法来监听 `$globalVar` 变量的变化。每当 `$globalVar` 发生变化时，我们就会在控制台上看到一个输出。

相关问题

vue设置全局变量并监听

在 Vue 中设置全局变量可以通过在 Vue 实例上挂载属性的方式来实现，可以使用 Vue.mixin() 方法来在全局混入指定的选项。

例如，我们可以在 main.js 文件中定义一个全局变量：

Vue.mixin({
  data: function() {
    return {
      globalVariable: 'Hello World!'
    }
  }
})

然后在组件中就可以通过 this.globalVariable 来访问这个全局变量了。

如果需要监听这个全局变量的变化，可以使用 Vue.watch() 方法来监听：

Vue.mixin({
  data: function() {
    return {
      globalVariable: 'Hello World!'
    }
  },
  watch: {
    globalVariable: function(newValue, oldValue) {
      console.log('globalVariable changed from ' + oldValue + ' to ' + newValue)
    }
  }
})

这样，当全局变量 globalVariable 发生变化时，就会触发 watch 中定义的回调函数。

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应用的根实例中定义的。这样就可以实现全局变量的持久化。