VUE 全局变量的几种实现方式

当我们使用Vue开发应用时，有时候我们希望在不同的组件之间共享一些全局变量。在Vue中实现全局变量有以下几种方式：

1. 使用mixin混入

可以通过 mixin 将共享的全局状态注入到每个组件中。mixin 是 Vue 中用来分发可复用功能的一种方式，它可以包含任何组件选项。具体实现如下：

// 声明一个常量对象，用于存储全局变量
const globalData = { 
  userName: 'Tom',
}

// 定义 mixin 对象
const globalMixin = {
  data() {
    return {
      // 将全局变量存储到每个组件中的数据对象中
      globalData: globalData,
    }
  },
}

// 将 mixin 对象应用到 Vue 实例
const app = new Vue({
  el: '#app',
  mixins: [globalMixin],
  // ...
})

该方式将全局变量存储到静态变量 globalData 中，并通过实现一个 globalMixin 对象的方式，将 globalData 混入到每个组件的数据对象中，从而实现了全局变量的共享。这种方式的优势在于，如果需要使用全局变量时，只需要使用 mixin 对象中的 globalData 即可。

2. 使用Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。具体实现如下：

import Vue from 'vue'
import Vuex from 'vuex'

// 声明一个常量对象，用于存储全局变量
const globalData = { 
  userName: 'Tom',
}

// 注册Vuex插件
Vue.use(Vuex)

// 创建 store 实例
const store = new Vuex.Store({
  // 存储全局变量的 state 对象
  state: {
    globalData: globalData,
  },
  // ...
})

该方式的优势在于，可以对全局变量进行统一的管理，并通过 this.$store.state.globalData 访问全局变量。

示例说明

以上两种方式的示例代码如下：

mixin 示例

<!-- 组件模板 -->
<template>
  <div>{{ globalData.userName }}</div>
</template>

<!-- 组件JS逻辑 -->
<script>
export default {
  // 组件中需要用到的数据对象
  data() {
    return {
      // 注意：这里必须为当前组件定义一个名字为 userData 的空对象
      userData: {},
    }
  },
  // 注册 mixin
  mixins: [globalMixin],
  // 生命周期钩子函数，组件实例创建之前
  created() {
    // 将全局数据存入组件数据对象中，以供组件之间共享
    this.userData = this.globalData
    // 在此处可以通过 this.userData 使用全局变量了
    console.log(this.userData.userName) // => Tom
  },
}
</script>

Vuex 示例

<!-- 组件模板 -->
<template>
  <div>{{ globalData.userName }}</div>
</template>

<!-- 组件JS逻辑 -->
<script>
// 导入 Vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 注册 Vuex 插件
Vue.use(Vuex)

export default {
  // 引用Vuex store实例
  store,
  // 组件中需要用到的数据对象
  data() {
    return {
      // 注意：这里必须为当前组件定义一个名字为 userData 的空对象
      userData: {},
    }
  },
  // 生命周期钩子函数，组件实例创建之前
  created() {
    // 将全局数据存入临时对象中，以供组件之间共享
    this.userData = this.$store.state.globalData
    // 在此处可以通过 this.userData 使用全局变量了
    console.log(this.userData.userName) // => Tom
  },
}
</script>

以上两种方式都能够实现全局变量的共享，选择哪种方式需要按照具体情况具体分析。