Vue 3.0 組合式API 提供/注入

本指南假定你已經(jīng)閱讀了 Provide / Inject、組合式 API 介紹和響應(yīng)性基礎(chǔ)。如果你不熟悉組合式 API，請(qǐng)先閱讀這篇文章。

我們也可以在組合式 API 中使用 provide/inject。兩者都只能在當(dāng)前活動(dòng)實(shí)例的 setup() 期間調(diào)用。

#設(shè)想場(chǎng)景

假設(shè)我們要重寫(xiě)以下代碼，其中包含一個(gè) MyMap 組件，該組件使用組合式 API 為 MyMarker 組件提供用戶的位置。

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>
<script>
import MyMarker from './MyMarker.vue'
export default {
  components: {
    MyMarker
  },
  provide: {
    location: 'North Pole',
    geolocation: {
      longitude: 90,
      latitude: 135
    }
  }
}
</script>

<!-- src/components/MyMarker.vue -->
<script>
export default {
  inject: ['location', 'geolocation']
}
</script>

#使用 Provide

在 setup() 中使用 provide 時(shí)，我們首先從 vue 顯式導(dǎo)入 provide 方法。這使我們能夠調(diào)用 provide 時(shí)來(lái)定義每個(gè) property。

provide 函數(shù)允許你通過(guò)兩個(gè)參數(shù)定義 property：

1. property 的 name (<String> 類型)
2. property 的 value

使用 MyMap 組件，我們提供的值可以按如下方式重構(gòu)：

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>
<script>
import { provide } from 'vue'
import MyMarker from './MyMarker.vue
export default {
  components: {
    MyMarker
  },
  setup() {
    provide('location', 'North Pole')
    provide('geolocation', {
      longitude: 90,
      latitude: 135
    })
  }
}
</script>

#使用注入

在 setup() 中使用 inject 時(shí)，還需要從 vue 顯式導(dǎo)入它。一旦我們這樣做了，我們就可以調(diào)用它來(lái)定義如何將它暴露給我們的組件。

inject 函數(shù)有兩個(gè)參數(shù)：

1. 要注入的 property 的名稱
2. 一個(gè)默認(rèn)的值 (可選)

使用 MyMarker 組件，可以使用以下代碼對(duì)其進(jìn)行重構(gòu)：

<!-- src/components/MyMarker.vue -->
<script>
import { inject } from 'vue'
export default {
  setup() {
    const userLocation = inject('location', 'The Universe')
    const userGeolocation = inject('geolocation')
    return {
      userLocation,
      userGeolocation
    }
  }
}
</script>

#響應(yīng)性

#添加響應(yīng)性

為了增加提供值和注入值之間的響應(yīng)性，我們可以在提供值時(shí)使用 ref 或 reactive。

使用 MyMap 組件，我們的代碼可以更新如下：

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>
<script>
import { provide, reactive, ref } from 'vue'
import MyMarker from './MyMarker.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>

現(xiàn)在，如果這兩個(gè) property 中有任何更改，MyMarker 組件也將自動(dòng)更新！

#修改響應(yīng)式 property

當(dāng)使用響應(yīng)式提供/注入值時(shí)，建議盡可能，在*提供者*內(nèi)保持響應(yīng)式 property 的任何更改。

例如，在需要更改用戶位置的情況下，我們最好在 MyMap 組件中執(zhí)行此操作。

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>
<script>
import { provide, reactive, ref } from 'vue'
import MyMarker from './MyMarker.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 = 'South Pole'
    }
  }
}
</script>

然而，有時(shí)我們需要在注入數(shù)據(jù)的組件內(nèi)部更新注入的數(shù)據(jù)。在這種情況下，我們建議提供一個(gè)方法來(lái)負(fù)責(zé)改變響應(yīng)式 property。

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>
<script>
import { provide, reactive, ref } from 'vue'
import MyMarker from './MyMarker.vue
export default {
  components: {
    MyMarker
  },
  setup() {
    const location = ref('North Pole')
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    })
    const updateLocation = () => {
      location.value = 'South Pole'
    }
    provide('location', location)
    provide('geolocation', geolocation)
    provide('updateLocation', updateLocation)
  }
}
</script>

<!-- src/components/MyMarker.vue -->
<script>
import { inject } from 'vue'
export default {
  setup() {
    const userLocation = inject('location', 'The Universe')
    const userGeolocation = inject('geolocation')
    const updateUserLocation = inject('updateLocation')
    return {
      userLocation,
      userGeolocation,
      updateUserLocation
    }
  }
}
</script>

最后，如果要確保通過(guò) provide 傳遞的數(shù)據(jù)不會(huì)被注入的組件更改，我們建議對(duì)提供者的 property 使用 readonly。

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>
<script>
import { provide, reactive, readonly, ref } from 'vue'
import MyMarker from './MyMarker.vue
export default {
  components: {
    MyMarker
  },
  setup() {
    const location = ref('North Pole')
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    })
    const updateLocation = () => {
      location.value = 'South Pole'
    }
    provide('location', readonly(location))
    provide('geolocation', readonly(geolocation))
    provide('updateLocation', updateLocation)
  }
}
</script>