vue2 全局变量

在 Vue2 中，可以通过在 Vue 实例上添加属性或者在全局 Vue 对象上添加属性来创建全局变量。

一种常见的方式是在 main.js 中使用 `Vue.prototype` 添加全局变量：

// main.js
import Vue from 'vue'
import App from './App.vue'

Vue.prototype.$globalVar = 'Hello World'

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

在组件中，可以通过 `this.$globalVar` 来访问全局变量。

另一种方式是在 main.js 中使用 `Vue.prototype` 添加一个对象，该对象包含全局变量：

// main.js
import Vue from 'vue'
import App from './App.vue'

Vue.prototype.$global = {
  var1: 'Hello',
  var2: 'World'
}

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

在组件中，可以通过 `this.$global.var1` 和 `this.$global.var2` 分别访问全局变量。

需要注意的是，全局变量在整个应用中都是共享的，因此在使用时需要注意避免重名或冲突。最好的方式是将全局变量按模块或功能进行分类，避免命名冲突。

相关问题

uniapp vue2 全局变量

在uni-app中，可以使用globalData来定义全局变量。在App.vue文件中，可以声明和使用globalData，并且可以使用API来读写这个值。下面是一个示例：

// App.vue
export default {
  globalData: {
    userInfo: null,
    token: ''
  },
  onLaunch() {
    // 在这里可以对globalData进行初始化
    this.globalData.userInfo = { name: 'John', age: 20 };
    this.globalData.token = '123456';
  }
}

在其他组件中，可以通过`this.$options.globalData`来访问和修改globalData的值。例如：

// MyComponent.vue
export default {
  mounted() {
    console.log(this.$options.globalData.userInfo); // 输出：{ name: 'John', age: 20 }
    this.$options.globalData.token = '654321';
  }
}

需要注意的是，uni-app中的globalData是在各个平台（包括H5、App等）都实现了的。这样可以方便地在不同平台上共享和使用全局变量。

vue2全局变量可以响应式吗

Vue2 全局变量可以通过 `Vue.observable()` 方法将其转换为响应式对象。例如：

const globalData = { count: 0 };
Vue.observable(globalData);

new Vue({
  data: {
    globalData
  },
  mounted() {
    setInterval(() => {
      this.globalData.count++;
    }, 1000);
  },
  template: `
    <div>
      Global Data Count: {{ globalData.count }}
    </div>
  `
}).$mount('#app');

在上面的例子中，我们将 `globalData` 对象转换为响应式对象，并将其作为 Vue 实例的 `data` 属性的一部分。在 `mounted()` 钩子中，我们使用 `setInterval()` 方法每秒钟增加 `globalData.count` 的值。由于 `globalData` 对象是响应式的，所以每次值发生变化时，Vue 会自动重新渲染组件，显示最新的值。