摘要

透過結合 provide、inject 與 Vue 的響應式 API（如 ref 或 reactive），我們可以實現一個輕量級、跨元件的響應式狀態共享方案。

定義與說明

當祖先元件 provide 一個響應式物件（如一個 ref）時，後代元件 inject 到的也會是這個響應式物件。這意味著，當祖先元件改變這個響應式物件的值時，所有注入了它的後代元件都會自動更新。為了維持清晰的資料流，通常還會一併提供一個修改該狀態的方法。

實作範例

響應式狀態共享示例

<!-- App.vue (提供者) -->
<script setup>
import { provide, ref, readonly } from 'vue';
const user = ref({ name: 'Guest' });
function login(username) { user.value = { name: username }; }
// 提供唯讀的 user 狀態和登入方法
provide('user-state', readonly(user));
provide('user-login', login);
</script>

<!-- DeepChild.vue (注入者) -->
<script setup>
import { inject } from 'vue';
const user = inject('user-state');
const login = inject('user-login');
</script>
<template>
  <p>目前使用者: {{ user.name }}</p>
  <button v-if="user.name === 'Guest'" @click="login('Jake')">登入</button>
</template>

結論

響應式的 provide/inject 模式是 Pinia 等專業狀態管理庫的底層原理。對於中小型應用或特定功能區塊的狀態共享，它是一種非常有效且簡潔的解決方案。

狀態共享響應式 provide/inject