组合式提供与注入

 

在之前的章节，我们讲了选项式的 提供与注入，今天我们继续讲组合式提供与注入。

 

我们也可以在组合式 API 中使用 provide/inject。两者都只能在当前活动实例的 setup() 期间调用。

 

设想场景

 

假设我们要重写以下代码，其中包含一个 TemplateM 组件，该组件使用组合式 API 为 MyMarker 组件提供用户的位置。

 

<template>

 

  <MyMarker />

 

</template>

 

<script>

 

import MyMarker from '../components/MyMarker'

 

export default {

 

  components: {

 

    MyMarker

 

  },

 

  provide: {

 

    location: 'North Pole',

 

    geolocation: {

 

      longitude: 90,

 

      latitude: 135

 

    }

 

  }

 

}

 

</script>

 

关于 MyMaker.vue 的代码如下：

 

<template>

 

  <div>

 

    {{location}} - {{geolocation}}

 

  </div>

 

</template>

 

<!-- src/components/MyMarker.vue -->

 

<script>

 

export default {

 

  inject: ['location', 'geolocation']

 

}

 

</script>

 

我们可以看到效果如下：

 

上面我们使用的选项式的提供与注入，接下来我们就来使用组合式 API 来改造上面的代码。

 

组合式 provide

 

在 setup() 中使用 provide 时，我们首先从 vue 显式导入 provide 方法。这使我们能够调用 provide 时来定义每个 property。

 

provide 函数允许你通过两个参数定义 property：

 

property 的 name (<String> 类型)

 

property 的 value

 

使用 TemplateM 组件，我们提供的值可以按如下方式重构：

 

<template>

 

  <MyMarker />

 

</template>

 

<script>

 

import MyMarker from '../components/MyMarker'

 

import {provide} from 'vue'

 

export default {

 

  components: {

 

    MyMarker

 

  },

 

  setup() {

 

    provide('location', 'North Pole')

 

    provide('geolocation', {

 

      longitude: 90,

 

      latitude: 135

 

    })

 

  },

 

}

 

</script>

 

我们发现就是将 provide 对象改造成 provide(key, value) 函数的形式。

 

组合式 inject

 

在 setup() 中使用 inject 时，还需要从 vue 显式导入它。一旦我们这样做了，我们就可以调用它来定义如何将它暴露给我们的组件。

 

inject 函数有两个参数：

 

要注入的 property 的名称

 

一个默认的值 (可选)

 

使用 MyMarker 组件，可以使用以下代码对其进行重构：

 

<template>

 

  <div>{{ location }} - {{ geolocation }}</div>

 

</template>

 

<!-- src/components/MyMarker.vue -->

 

<script>

 

import { inject } from 'vue'

 

export default {

 

  name: 'MyMarker',

 

  setup() {

 

    const location = inject('location')

 

    const geolocation = inject('geolocation')

 

    return {

 

      location,

 

      geolocation

 

    }

 

  }

 

}

 

</script>

 

我们再次看看效果如下：

 

响应式

 

添加响应式

 

为了增加提供值和注入值之间的响应性，我们可以在提供值时使用 ref 或 reactive。

 

使用 TemplateM 组件，我们的代码可以更新如下：

 

<template>

 

  <MyMarker />

 

</template>

 

<script>

 

import MyMarker from '../components/MyMarker'

 

import {provide, ref, reactive} from 'vue'

 

export default {

 

  components: {

 

    MyMarker

 

  },

 

  setup() {

 

    const location = ref('North Pole')

 

    const geolocation = reactive({

 

      longitude: 90,

 

      latitude: 135

 

    })

 

    provide('location', location)

 

    provide('geolocation', geolocation)

 

  },

 

}

 

</script>

 

现在，如果这两个 property 中有任何更改，MyMarker 组件也将自动更新！

 

修改响应式 property

 

当使用响应式提供/注入值时，建议尽可能，在*提供者*内保持响应式 property 的任何更改。

 

例如，在需要更改用户位置的情况下，我们最好在 TemplateM 组件中执行此操作。

 

<template>

 

  <MyMarker />

 

</template>

 

<script>

 

import MyMarker from '../components/MyMarker'

 

import {provide, ref, reactive} from 'vue'

 

export default {

 

  components: {

 

    MyMarker

 

  },

 

  setup() {

 

    const location = ref('North Pole')

 

    const geolocation = reactive({

 

      longitude: 90,

 

      latitude: 135

 

    })

 

    provide('location', location)

 

    provide('geolocation', geolocation)

 

    return {

 

      location

 

    }

 

  },

 

  methods: {

 

    updateLocation() {

 

      this.location = "hahaha"

 

    }

 

  }

 

}

 

</script>

 

然而，有时我们需要在注入数据的组件内部更新注入的数据。在这种情况下，我们建议提供一个方法来负责改变响应式 property。

 

<template>

 

  <MyMarker />

 

</template>

 

<script>

 

import MyMarker from '../components/MyMarker'

 

import {provide, ref, reactive} from 'vue'

 

export default {

 

  components: {

 

    MyMarker

 

  },

 

  setup() {

 

    const location = ref('North Pole')

 

    const geolocation = reactive({

 

      longitude: 90,

 

      latitude: 135

 

    })

 

    const updateLocation = () => {

 

      location.value = "hahaha"

 

    }

 

    provide('location', location)

 

    provide('geolocation', geolocation)

 

    provide('updateLocation', updateLocation)

 

  },

 

}

 

</script>

 

<template>

 

  <div>{{ location }} - {{ geolocation }}</div>

 

</template>

 

<!-- src/components/MyMarker.vue -->

 

<script>

 

import { inject } from 'vue'

 

export default {

 

  name: 'MyMarker',

 

  setup() {

 

    const location = inject('location')

 

    const geolocation = inject('geolocation')

 

    const updateLocation = inject('updateLocation')

 

    return {

 

      location,

 

      geolocation,

 

      updateLocation

 

    }

 

  }

 

}

 

</script>

 

最后，如果要确保通过 provide 传递的数据不会被注入的组件更改，我们建议对提供者的 property 使用 readonly。

 

<template>

 

  <MyMarker />

 

</template>

 

<script>

 

import MyMarker from '../components/MyMarker'

 

import {provide, ref, reactive, readonly} from 'vue'

 

export default {

 

  components: {

 

    MyMarker

 

  },

 

  setup() {

 

    const location = ref('North Pole')

 

    const geolocation = reactive({

 

      longitude: 90,

 

      latitude: 135

 

    })

 

    const updateLocation = () => {

 

      location.value = "hahaha"

 

    }

 

    provide('location', readonly(location))

 

    provide('geolocation', readonly(geolocation))

 

    provide('updateLocation', updateLocation)

 

  },

 

}

 

</script>