元件載入時，Vue的Provide和Inject出現未定義的情況

Question

<p><br /></p><h2>情況</h2> <p>我正在嘗試使用Vue 的提供和注入功能的選項API，以便<code>header.vue</code> 元件可以向<code>container-nav.vue</code> 元件提供資料（請參閱組件層次結構）。但是，當注入資料時，它在初始載入時是未定義的。 </p> <p><strong>目前元件層次結構：</strong></p> <ul> <li>header.vue > header-nav-menu.vue > 容器-nav.vue</li> </ul> <h1>試 1 - header.vue（祖父母）</h1> <p>在此元件中，我從 pinia (storeCommon) 取得 <code>Provide() {}</code> 內的以下字串 <code>'/'</code>。 </p> <pre class="brush:php;toolbar:false;">import { defineComponent } from 'vue' import parentStore from '@/store' export default defineComponent({ setup() { // Should not have access to this.navHome -> undefined (loads before options API) console.log("1. Calling setup in Header") const storeCommon = parentStore() return { storeCommon } }, beforeCreate() { // Should not have access to this.navHome -> undefined (loads before options API) console.log("2. Calling beforeCreate in Header") }, provide() { console.log("3. Calling provide in Header") return { navHome: this.storeCommon.textualData[0]?.navigation.links.home } }, created() { // Should have access to this.navHome -> '/' (loads after options API) console.log("9. Calling beforeCreate in Container Nav: ", this.$refs.navHome) }, mounted() { // Should have access to this.navHome -> '/' (loads after options API) console.log("8. Calling beforeCreate in Container Nav: ", this.$refs.navHome) } })</pre> <h1>嘗試 1 - container-nav.vue（子級）</h1> <p>在此組件中，我注入由 <code>header.vue</code> 組件提供的 <code>navHome</code>。</p> <pre class="brush:php;toolbar:false;">從 'vue' 匯入 {defineComponent } 導出預設定義組件（{ 注入：['navHome']， 設定() { // 不應該造訪 this.navHome ->未定義（在選項 API 之前載入） console.log("4. 在 Container Nav 中呼叫設定") }, 創建之前() { // 不應該造訪 this.navHome ->未定義（在選項 API 之前載入） console.log("5.在Container Nav中呼叫beforeCreate") }, 創建（）{ // 應該可以存取 this.navHome -> '/'（在選項 API 之後載入） console.log("6. 在容器導覽中呼叫 beforeCreate: ", this.$refs.navHome) }, 安裝（）{ // 應該可以存取 this.navHome -> '/'（在選項 API 之後載入） console.log("7. 在容器導覽中呼叫 beforeCreate: ", this.$refs.navHome) } })</pre> <h1>嘗試 1 - 測試</h1> <p>使用 console.logs 執行以下程式碼會產生以下結果：</p>

1.呼叫 Header 中的設置
2.在Header中呼叫beforeCreate：undefined ->正確的
3.在Header中呼叫Provide
4. 在Container Nav中呼叫setup
5.Container Nav中調用beforeCreate：undefined ->正確的
6. 在 Container Nav 中建立的呼叫：未定義 ->不正確（應該是“/”）
7.在Container Nav中調用mounted：undefined ->不正確（應該是“/”）
8. 調用mounted在Header中：undefined ->不正確（應該是“/”）
9. Header 中所建立的呼叫：undefined ->不正確（應為“/”）

<小時/>>

嘗試2 - header.vue（祖父母）

使用與相同的程式碼和選項 API 之前，除了使用 setup和 提供。</p> <pre class="brush:php;toolbar:false;">從 'vue' 匯入 {defineComponent, Provide } 從“@/store”導入parentStore 設定() { // 1.嘗試過這種方式 const navLinkHome = ParentStore().getTextualData[0]?.navigation.links.home const navHome = 提供('navHome', navLinkHome) // 2.嘗試過這種方式 const navHome = Provide('navHome',parentStore().getTextualData[0]?.navigation.links.home) 返回 { // 1 & 2 導航首頁 // 也是這樣 navHome：提供（'navHome'，parentStore（）.getTextualData [0]？.navigation.links.home） } }</pre>

嘗試2-container-nav.vue（子級）

<pre class="brush:php;toolbar:false;">從 'vue' 匯入 {defineComponent, Inject } 設定() { const navHome = 注入('navHome') 返回 { 導航首頁 // 也嘗試過，但與上面相同，只是時間更長 導覽首頁： 導覽首頁 } }</pre> <h1>嘗試 2 - 測試</h1> <p>使用 console.logs 執行以下程式碼會產生以下結果：</p>

1.呼叫 Header 中的設置
2.在Header中呼叫beforeCreate：undefined ->正確的
3. 在Container Nav中呼叫setup
4.Container Nav中調用beforeCreate：undefined ->正確的
5. 在 Container Nav 中建立的呼叫：未定義 ->不正確（應該是“/”）
6.在Container Nav中調用mounted：undefined ->不正確（應該是“/”）
7. 調用mounted在Header中：undefined ->不正確（應該是“/”）
8. Header 中所建立的呼叫：undefined ->不正確（應為“/”）

<h2>混亂</h2>

<li><p>首先，我注意到在 <code>header.vue</code>中使用 provide() {}; Options API 時，並嘗試引用 navHome。我無法在創建或安裝的方法中使用 this.navHome 。我會收到一條錯誤訊息，說它在 <code>CreateComponentPublicInstance</code>類型上不存在。為了解決這個問題，我改為使用 this.$refs.navHome - 甚至不確定這是否是正確的做法。</p> </li>

• 其次，當在 container-nav.vue 時組件中使用 inject: [ 'navHome' ];當時，我無法使用 this.navHome訪問它。同樣，我只能使用 <code>this.$refs.navHome</code> 存取它。 </p> </li> </ul> <p>但是。 </p> <ul> <li>在<code>header.vue</code> 的設定方法中使用Provide 並且在<code>container-nav.vue</code> 的設定方法中使用Inject 時，我可以使用<ue</code> 的設定方法時，我可以使用< ;code>this.navHome</code> 訪問<code>navHome</code> 。不知道為什麼要這樣做。 </li> </ul><p><br /></p>

Answer 1

• 您需要確保parentStore().getTextualData[0]?.navigation.links.home 在父級提供時具有值"/"因為它不是一個響應式對象
• 或您可以提供這樣的響應式物件：

const navLinkHome = computed(()=> parentStore().getTextualData[0]?.navigation.links.home)
const navHome = provide('navHome', navLinkHome)

• this.$refs.navHome 是錯誤的方式，this.navHome 應該可以工作。不過，我建議您使用組合 API 樣式
• 我很好奇，您已經有了 pinia 商店，為什麼還需要使用提供/注入？