Vue 2.0 中依赖注入 provide/inject组合实战

下面是关于“Vue 2.0 中依赖注入 provide/inject组合实战”的完整攻略。

一、Provide/Inject 简介

在 Vue 2.2.0+ 版本中，提供了一个新的 API：provide / inject。它主要解决了跨层级组件之间传递数据的需求，可以方便地实现递归组件或者子组件之间的数据传递，通常用于共享组件之间的业务数据。

provide 和 inject 组合在一起使用可以实现一个类似于全局变量的效果，可以在任意子组件中获取到 provide 中的数据，而不需要显式地逐层传递 props。

二、Provide/Inject 使用

provide 和 inject 都是 Vue 实例的属性，需要注意的是，只有在父组件中使用 provide，子组件中才能使用 inject 来接收该传递的数据。

provide 和 inject 组合使用时，有一些需要注意：

• 父组件 provide 的都是只读属性，即子组件中如果对这些属性进行更改并不能成功修改；
• 在不使用 TypeScript 语法的情况下，需要提前在子组件中声明需要注入的属性，否则会发出警告，但不影响实际使用。

2.1 父组件提供数据

父组件通过在其实例中提供provide对象来向子组件提供数据。在下面的示例中，父组件通过provide对象向子组件提供了一个名为app的值:

const ParentComponent = {
  provide: {
    app: 'parent app'
  }
  ...
}

2.2 子组件注入数据

在子组件中，通过父组件提供的数据来进行依赖注入。在下面的示例中，子组件通过inject属性接收父组件提供的名为app的值：

const ChildComponent = {
  inject: ['app'],
  created() {
      console.log(this.app);
  },
  ...
}

在上述示例中，子组件ChildComponent中的inject属性声明注入了名为app的值，created函数在组件实例创建完毕后打印注入的值。

三、Provide/Inject 的实战应用场景

Provide/Inject 可以应用在很多场景中，下面介绍两个实战中的例子。

3.1 用户权限控制

提供一个全局的用户权限控制方法来控制整个系统权限，当用户登录成功后将用户信息通过provide暴露出去，子组件通过注入来获取用户信息用于判断权限：

const ParentComponent = {
  provide() {
    return {
      user: {
        role: 'admin'
      }
    }
  }
}

const ChildComponent = {
  inject: ['user'],
  mounted() {
    if (this.user.role !== 'admin') {
      console.log('you are not authorized!');
    }
  }
}

在上面示例代码中，通过在父组件实例中提供user这个可读属性，子组件可以注入user属性并在mounted函数中进行权限判断操作。

3.2 多个请求公用一个 API 实例

在一些比较复杂的项目中，可能会有很多个组件需要向后台进行 API 请求。如果每个组件在请求时都新建一个新的 API 实例，可能会导致资源浪费。这种情况下，可以将 API 实例统一放在一个父组件中并通过provide注入到子组件中使用：

const api = {
  users: {
    getUsers() {
      // 执行获取用户列表的请求
    },
    getUserById(id) {
      // 执行获取指定用户的请求
    }
  }
};

const ParentComponent = {
  provide() {
    return {
      api
    }
  }
};

const ChildComponentA = {
  inject: ['api'],
  mounted() {
    this.api.users.getUsers();
  }
};

const ChildComponentB = {
  inject: ['api'],
  mounted() {
    this.api.users.getUserById(1);
  }
};

在上面的示例代码中，api对象实例被注册到了父组件的provide属性中，并且被子组件ChildComponentA和ChildComponentB通过inject注入到子组件实例中，从而在各自的mounted函数中调用api对象中的方法来执行相应的请求操作。

更多的关于 Provide/Inject 的应用场景，请参考 Vue 官方文档 。

到这里，关于“Vue 2.0 中依赖注入 provide/inject 组合实战”的攻略介绍就结束了，希望有所帮助！