iT邦幫忙

2021 iThome 鐵人賽

DAY 22
1
Modern Web

前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue系列 第 22

Day_22: 讓 Vite 來開啟你的Vue 之 跨元件響應式資料的處理

Hi Dai Gei Ho~ 我是 Winnie ~

在今天文章中,我們要來繼續延伸 昨天文章的主題 Provide & Inject ,針對 響應式資料傳遞的操作 來做介紹。

由於 provide/inject 主要作用 是 跨元件之間資料狀態溝通 ,而其綁定的值預設並不是響應式的。所以 如果需要增加 provide/ inject 中的提供值的響應性,我們可以通過傳遞響應式資料來處理,例如在 provide 時 使用 ref() 或 reactive()把資料包裝起來 :

// App.vue
import { ref, reactive, provide }
export default{
    setup (){
        const name = ref('winnie');
        const location = reactive({
            city: '台北市',
            area: '大安區'
        }])
        provide('name',name)  
        provide('location',location) 
    }
}

如上方範例,我們將 namelocation provide出去了,而 當這兩個 被更改,APP.vue中的值也會跟著更新。是不是超級方便的?但是...千萬別這麼做(話說,在前幾個月我也做過這事,而且還不只一次XD),這也是 官方文件中 建議 別這麼做的

為什麼不能這麼做呢?

因為 provide/inject 不像 Vuex 可以追蹤各個state的變動,如果資料狀態操作分散在多個子元件中,被更改出現問題時,要解決就會變得困難,同時程式碼也會變得很難維護。

因此,官方文件這邊就提出建議,當使用provide/inject 值時,盡可能將對 響應式property 的所有修改及操作,限制在 provide()的元件內部中,來更新 響應式的資料狀態。

有點抽象,先讓我們來看看 以下範例:

//provide.vue
import {  ref, provide, readonly }
export default{
    setup(){
      const count = ref(0);
      const setCount = ()={
        count.vlaue++
      }
        
      provide('count', readonly(count)) // 使用readonly把保護起來,只能透過setCount來更動它。
      provide('setCount',setCount)
    }
}
//inject.vue
<template>
    <div>{{count}}</div>
    <button @click="updateCount">+1</button>
</template>

//略...

 setup(){
     const count =inject('count') //因為被 readonly保護了,所以只可讀,不可直接修改他
     const updateCount  = inject('setCount')
 
     return{
      count,
      updateCount 
     }
 }

//略...

從上計數器範例可以看到,當子元件 inject了 上層元件provide出來的state時,只能透過 provide 所提供的 修改函式來 更新其狀態。同時為確保傳遞出來的資料不會被子元件任意更改,在這邊可以使用 readonly 或者 computed 方法建立唯讀資料。

以上就是今天的文章,如任何有問題歡迎大家多多指教,謝謝大家。


上一篇
Day_21 : 讓 Vite 來開啟你的Vue 之 跨元件資料傳遞 Provide & Inject
下一篇
Day_23: 讓 Vite 來開啟你的Vue 之 <script setup>
系列文
前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue30

尚未有邦友留言

立即登入留言