vue3.0 inject 和 provide 使用

迷南。 2022-09-17 06:17 179阅读 0赞

## **组合式提供与注入 ：**[Vue 3 组合式 provide/inject - 知乎][Vue 3 _ provide_inject -] ##

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

我们也可以在组合式 API 中使用 [provide/inject][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>
    
    
    <script>
    export default {
      inject: ['location', 'geolocation']
    }
    </script>

我们可以看到效果如下：

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

## **组合式 provide** ##

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

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

1.  property 的 name (`<String>` 类型)
2.  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` 函数有两个参数：

1.  要注入的 property 的名称
2.  一个默认的值 (**可选**)

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

<template>
      <div>{
       { location }} - {
       { geolocation }}</div>
    </template>
    
    
    <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` 组件，我们的代码可以更新如下：

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

### **修改响应式 property** ###

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

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

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

发布于 2020-11-14 16:59

[Vue 3 _ provide_inject -]: https://zhuanlan.zhihu.com/p/293419531
[provide_inject]: https://link.zhihu.com/?target=https%3A//vue3js.cn/docs/zh/guide/component-provide-inject.html
[ref]: https://link.zhihu.com/?target=https%3A//vue3js.cn/docs/zh/guide/reactivity-fundamentals.html%23%25E5%2588%259B%25E5%25BB%25BA%25E7%258B%25AC%25E7%25AB%258B%25E7%259A%2584%25E5%2593%258D%25E5%25BA%2594%25E5%25BC%258F%25E5%2580%25BC%25E4%25BD%259C%25E4%25B8%25BA-refs
[reactive]: https://link.zhihu.com/?target=https%3A//vue3js.cn/docs/zh/guide/reactivity-fundamentals.html%23%25E5%25A3%25B0%25E6%2598%258E%25E5%2593%258D%25E5%25BA%2594%25E5%25BC%258F%25E7%258A%25B6%25E6%2580%2581
[property]: https://www.zhihu.com/search?q=%E5%93%8D%E5%BA%94%E5%BC%8F+property&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22%3A%22article%22%2C%22sourceId%22%3A293419531%7D