跳至主要内容

Day16 - 使用 provide, inject 傳遞資料到通知元件

備註

本頁作業是使用 Option Api 風格撰寫

2025 Vue 直播班每日任務，藉由一天學一點積沙成塔

provide / inject​

和前面學習的 props/emits 一樣是傳遞資訊，但 props/emits 是單向的父子傳遞，
如果遇到整個網站都需要傳遞例如：『是否為會員』的資料的時候，
就算沒有用到的中間元件 (例如下面的 HomePage.vue 其實沒有需要傳遞值) 也需要接著值再往下傳遞，此時情況就會變得複雜

元件樹.md
- App.vue
  - Header.vue (會員狀態：切換登入/登出按鈕)
  - HomePage.vue
    - FeatProducts.vue (會員狀態：顯示特別優惠)
      - ProductCard.vue (會員狀態：顯示『會員限定』標籤)
  - UserDashboard.vue (會員狀態：顯示個人資料)

所以就可以用到 provide 將父元子的值傳給所有的子元件，並且子元件再使用 inject 來接收

提示

登入或登出時，狀態會更新嗎？
如果 provide 是 ref：const isMember = ref(true);，
當 isMember.value 的值改變時，所有有 inject 資料的元件都會自動更新

用法​

  • 在 App.vue 透過 API 取得會員狀態後，使用 provide('isMember', isMember)
  • 在需要的頁面使用 const isMember = inject('isMember') 來取得值

Topic​

請使用模版，並加上 inject 跟 provide：

  • 請在 JavaScript 中第 6 行 setup 中加上 inject。
  • 請在 JavaScript 中第 48 行加上 provide。
  • 以上都完成後，點擊「加入購物車」按鈕可以觸發通知訊息。

Result​

const FruitItem = {
  props: ['fruit'],
  setup(props){
    const notify = inject('notify');
    const addToCart = () => {
      notify(`${props.fruit.title} 已加入購物車`)
    }
  return { addToCart }
  },
}
// ...中斷省略

createApp({
  components: { FruitItem },
  setup() {
    const state = reactive({ message: '' })
    function notify(msg) {
      state.message = msg
      setTimeout(() => {
        state.message = ''
      }, 3000)
    }
    provide('state', state)
    provide('notify', notify)

    //...略
  }
})

思考與反饋​

  • 實務上多使用 Pinia 來處理跨組件或頁面共享狀態，這裡先挖個坑後面會補上 Pinia 的筆記

CODE​