vue3.0 inject 和 provide 使用

组合式提供与注入 :Vue 3 组合式 provide/inject - 知乎

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

我们也可以在组合式 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:

  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>

<!-- 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>

发布于 2020-11-14 16:59

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值