阅读数:23 评论数:0

方式一、使用provide/inject

如果你想在多个组件之间共享变量，你可以使用 provide 和 inject API。在父组件中使用 provide 来定义一个可以被子组件注入的变量，然后在子组件中使用 inject 来接收这个变量。

父组件

import { provide } from 'vue';

setup() {
  const globalValue = ref('some value');
  provide('globalValueKey', globalValue);
}

子组件

import { inject } from 'vue';

setup() {
  const globalValue = inject('globalValueKey');
  return { globalValue };
}

方式二、使用全局状态管理（如Vuex）

如果你的应用程序很大，可能需要一个全局状态管理库，例如 Vuex。你可以在 Vuex store 中定义全局状态，然后在任何组件的 setup 函数中通过 useStore 钩子访问这些状态。

import { useStore } from 'vuex';

setup() {
  const store = useStore();
  const globalValue = computed(() => store.state.someGlobalValue);
  return { globalValue };
}

方式三、使用全局属性

你可以在 Vue 应用实例上定义全局属性，然后在 setup 函数中通过 getCurrentInstance API 访问这些属性。

在创建 Vue 应用时：

const app = createApp(App);
app.config.globalProperties.$myGlobal = 'some value';

在组件的 setup 函数中：

import { getCurrentInstance } from 'vue';

setup() {
  const instance = getCurrentInstance();
  const globalValue = instance?.appContext.config.globalProperties.$myGlobal;
  return { globalValue };
}

方式四、使用响应式引用

如果你只是想在一个组件内部的多个 setup 函数调用之间共享变量（虽然这种情况不常见），你可以定义一个响应式引用并将其导出。

import { ref } from 'vue';

// 定义在模块作用域中
const globalValue = ref('some value');

// 导出以便在其他地方使用
export { globalValue };

// 在 setup 中使用
setup() {
  return { globalValue };
}