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) 
    }
}

如上方范例，我们将 name 与 location 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 方法建立唯读资料。

以上就是今天的文章，如任何有问题欢迎大家多多指教，谢谢大家。