Vue CLI 中在 Vue 组件里定义与使用全局变量的方法

在 Vue CLI 项目开发中，全局变量的合理定义与使用能够有效提升代码的可维护性与开发效率。接下来将详细介绍在 Vue 组件里定义和使用全局变量的方法。

一、使用 Vuex 定义全局变量

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

通过 vue add vuex 命令安装 Vuex 插件。安装完成后，在 store 文件夹下的 index.js 文件中定义全局变量。例如：

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

Vue.use(Vuex)

const state = {
  globalVariable: '这是一个全局变量'
}

const mutations = {
  UPDATE_GLOBAL_VARIABLE(state, newVal) {
    state.globalVariable = newVal
  }
}

export default new Vuex.Store({
  state,
  mutations
})

在组件中使用时，通过计算属性获取全局变量的值：

<template>
  <div>
    <p>{{ globalVariable }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    globalVariable() {
      return this.$store.state.globalVariable
    }
  }
}
</script>

二、使用 Vue 原型定义全局变量

可以通过在 Vue 实例的 prototype 上挂载变量来实现全局访问。在 main.js 文件中：

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

Vue.prototype.$globalVariable = '通过原型定义的全局变量'

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

在组件中直接使用：

<template>
  <div>
    <p>{{ $globalVariable }}</p>
  </div>
</template>

<script>
export default {
  created() {
    console.log(this.$globalVariable)
  }
}
</script>

三、使用 .env 文件定义全局变量

在项目根目录创建 .env 文件，定义全局变量，如：

VUE_APP_GLOBAL_MSG=来自.env 的全局消息

在组件中使用时，通过 process.env 访问：

<template>
  <div>
    <p>{{ globalMsg }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      globalMsg: process.env.VUE_APP_GLOBAL_MSG
    }
  }
}
</script>

以上几种方法各有优劣，在实际开发中，需根据项目需求和场景合理选择定义与使用全局变量的方式，从而更好地管理项目状态，提升开发体验。