Vue3定义全局变量的方式总结

在Vue 3中，定义全局变量的方式与Vue 2有一些不同，主要是因为Vue 3引入了Composition API。以下是Vue 3中定义全局变量的几种方式：

1. 使用provide和inject

Vue 3中的provide和inject可以用来在祖先组件和后代组件之间传递数据，类似于Vue 2的provide和inject，但有一些改进。

import { provide, inject } from 'vue';

export default {
  setup() {
    const state = {
      // 全局变量
      message: 'Hello World'
    };

    // 提供state，使其在所有后代组件中可用
    provide('state', state);

    return {
      // 在模板中使用state
      state
    };
  }
};

在后代组件中使用：

import { inject } from 'vue';

export default {
  setup() {
    const state = inject('state');

    return {
      state
    };
  }
};

2. 使用app.config.globalProperties

在Vue 3中，你可以通过app.config.globalProperties在全局范围内定义属性。

import { createApp } from 'vue';

const app = createApp({});

// 定义全局属性
app.config.globalProperties.$globalMessage = 'Hello from global property';

app.mount('#app');

在任何组件中使用：

import { getCurrentInstance } from 'vue';

export default {
  setup() {
    const message = getCurrentInstance().proxy.$globalMessage;

    return {
      message
    };
  }
};

3. 使用Composition API的reactive或ref

如果你需要在多个组件之间共享响应式状态，可以使用Composition API的reactive或ref。

import { reactive, provide } from 'vue';

const state = reactive({
  message: 'Hello World'
});

export default {
  setup() {
    // 提供state
    provide('state', state);

    return {
      // 在模板中使用state
      state
    };
  }
};

4. 使用app.use

如果你有一个插件或库需要在整个应用中使用，可以使用app.use来安装它。

import { createApp } from 'vue';
import MyPlugin from './MyPlugin';

const app = createApp({});

app.use(MyPlugin);

app.mount('#app');

在插件中，你可以定义全局变量或方法：

export default {
  install(app) {
    app.config.globalProperties.$myMethod = () => {
      // 你的逻辑
    };
  }
};

5. 使用第三方状态管理库

虽然不是Vue 3特有的，但使用状态管理库（如Vuex或Pinia）也是管理全局状态的常见方式。

import { createStore } from 'vuex';

const store = createStore({
  state: {
    message: 'Hello World'
  },
  getters: {
    message: (state) => state.message,
  },
  // mutations 和 actions
});

export default store;

然后在组件中使用：

import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['message'])
  }
};

注意事项

• 使用provide和inject时，变量的传递是“单向向上”的，即只能从祖先组件传递到后代组件，不能反向传递。

• app.config.globalProperties定义的属性在全局范围内可用，但它们不是响应式的。如果你需要响应式状态，可以使用Composition API的reactive或ref。

• 使用app.use安装的插件可以提供全局方法或属性，但要注意插件之间的兼容性。

Vue 3提供了灵活的方式来定义和管理全局变量，你可以根据项目的具体需求选择最合适的方法。