如何使用Vue的provide/inject

一、VUE的PROVIDE和INJECT是什么？

Vue的provide和inject是一对API，用于在组件树中传递数据、避免属性逐层传递的繁琐。provide 是在父级组件中定义我们想要提供给其所有子孙组件的数据，而子孙组件中通过 inject 进行引用。这样做的好处是可以轻松实现跨组件的数据共享、无论组件层级有多深，都可以直接接收到数据。

在 Vue 应用中，跨组件的数据共享是经常遇到的需求，例如主题配置或用户信息可能需要在多个不相邻的组件中访问。此时，如果按照传统的 props 传递方式，不仅代码冗余，并且组件的耦合性也会增强。provide和inject提供了一种优雅的解决方案。待会儿我们详细介绍它们的使用方法和应用场景。

二、PROVIDE和INJECT基本用法

基础语法

provide是在父级组件中使用的选项，它应该是一个对象或者返回对象的函数，这个对象的属性就是我们想要提供出去的数据。而inject则是在任何子孙组件中使用的选项，它要么是一个字符串数组，指明想要添加到这个组件的注射属性，要么是一个对象，映射到本地的计算属性。

示例代码

以一个简单的主题切换功能为例，父组件ThemeProvider提供theme，任何子孔雀使用inject注入该属性来使用。

// 父组件
export default {
  provide() {
    return {
      theme: 'dark'
    };
  },
  // 其他选项...
};
// 子组件
export default {
  inject: ['theme'],
  mounted(){
    console.log(this.theme); // 输出 'dark'
  },
  // 其他选项...
};

这样，无论组件嵌套了多少层，只要使用了inject就可以直接访问theme属性。

三、进阶用法与技巧

响应式provide

默认情况下，provide/inject 绑定并不是响应式的。要想让提供的数据保持响应性，可以使用 Vue 的响应式对象：

// 父组件
import { reactive } from 'vue';
export default {
  setup() {
    const theme = reactive({ color: 'dark' });
    provide('theme', theme);
    return { theme };
  },
  // 其他选项...
};
// 子组件
export default {
  inject: ['theme'],
  // 其他选项...
};

在这个例子中，如果theme.color改变了，所有injecttheme的组件也会自动更新。

在provide函数中使用ref

// 父组件
import { ref, provide } from 'vue';
export default {
  setup() {
    let theme = ref('dark');
    provide('theme', theme);
    // 在适当的时候改变theme的值
    // theme.value = 'light';
    return { theme };
  },
  // 其他选项...
};

使用ref可以确保数据的响应式，当theme的值发生变化时，所有使用了inject的子组件都将得到更新。

默认值的使用

inject接受一个第二个参数作为默认值，这个参数可以是一个没有默认值的数组，也可以是一个对象，其中提供了default选项。

export default {
  inject: {
    theme: { default: 'light' }
  },
  // 其他选项...
};

在没有祖先组件提供theme时，子组件inject的theme将使用'light'作为默认值。

四、使用场景与模式

配置提供者模式

provide和inject可以非常容易地实现所谓的“配置提供者模式”。这在实现基于插件的系统或为整个应用程序提供全局配置时非常有用。

// 配置根组件
export default {
  provide() {
    return {
      config: {/* 应用程序的全局配置 */}
    };
  },
  // 其他选项...
};
// 子孙组件可能如下使用全局配置
export default {
  inject: ['config'],
  created() {
    console.log(this.config.someSetting);
  },
  // 其他选项...
};

服务定位器模式

在一些复杂的应用中，可以将provide和inject用作服务定位器模式，提供和注入例如事件总线、API客户端实例等服务。这有助于在组件内部解耦服务的创建和使用。

// ServiceLocator 组件，它提供了各种服务
export default {
  provide() {
    return {
      apiService: new APIService(),
      eventBus: new EventBus()
    };
  },
  // 其他选项...
};
// 任意子组件都可以注入服务而不需要知道其实现
export default {
  inject: ['apiService', 'eventBus'],
  created() {
    this.apiService.getData();
    this.eventBus.on('some-event', this.doSomething);
  },
  // 其他选项...
};