vue全局变量怎么定义

// 在 Vue 项目中定义全局变量的方法有多种，以下是几种常见的方法：

// 方法一：在 main.js 中使用 Vue.prototype 定义全局变量
// 这种方法适用于 Vue 2.x 版本

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

Vue.config.productionTip = false;

// 定义全局变量
Vue.prototype.$globalVar = '这是一个全局变量';

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

// 解释：通过 Vue.prototype 定义的全局变量可以在任何组件中通过 this.$globalVar 访问。

// 方法二：使用 Vuex 状态管理 (推荐)
// 这种方法适用于复杂的应用程序，尤其是需要在多个组件之间共享状态时。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    globalVar: '这是一个全局变量'
  },
  mutations: {
    updateGlobalVar(state, newValue) {
      state.globalVar = newValue;
    }
  }
});

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

Vue.config.productionTip = false;

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

// 解释：通过 Vuex 定义的全局变量可以在任何组件中通过 this.$store.state.globalVar 访问，并且可以通过 mutations 更新它的值。

// 方法三：使用提供/注入 (provide/inject)
// 这种方法适用于父子组件之间的依赖注入。

// parentComponent.vue
<template>
  <div>
    <childComponent />
  </div>
</template>

<script>
export default {
  provide() {
    return {
      globalVar: '这是一个全局变量'
    };
  }
};
</script>

// childComponent.vue
<template>
  <div>{{ globalVar }}</div>
</template>

<script>
export default {
  inject: ['globalVar']
};
</script>

// 解释：通过 provide/inject 定义的全局变量可以在子组件中通过 inject 注入并访问。