コンポーネントがロードされるとき、Vue の Provide と Inject は未定義です。

Question

<p><br /></p><h2>状況</h2> <p><code>header.vue</code> コンポーネントが <code>container-nav.vue</code> にデータを提供できるように、Vue のオプション API を使用して機能を提供および挿入しようとしています。 ; コンポーネント (コンポーネント階層を参照)。ただし、データが注入される場合、初期ロードではデータは未定義になります。 </p> <p><strong>現在のコンポーネント階層: </strong></p>

<li>header.vue > header-nav-menu.vue >container-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' 「@/store」からparentStoreをインポートします デフォルトのエクスポートdefineComponent({ 設定（） { // this.navHome にアクセスすべきではありません -> 未定義 (オプション API の前にロードされます) console.log("1. ヘッダーでセットアップを呼び出す") const storeCommon =parentStore() 戻り値 { ストアコモン } }、 beforeCreate() { // this.navHome にアクセスすべきではありません -> 未定義 (オプション API の前にロードされます) console.log("2. ヘッダーのCreateの前に呼び出す") }、 提供する（） { console.log("3. ヘッダーでの Provide の呼び出し") 戻る { navHome: this.storeCommon.textualData[0]?.navigation.links.home } }、 作成した（） { // this.navHome にアクセスできる必要があります -> '/' (オプション API の後にロードされます) console.log("9. コンテナ Nav での beforeCreate の呼び出し: ", this.$refs.navHome) }、 マウントされた() { // this.navHome にアクセスできる必要があります -> '/' (オプション API の後にロードされます) console.log("8. コンテナ Nav での beforeCreate の呼び出し: ", 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;">import {defineComponent} from 'vue' デフォルトのエクスポートdefineComponent({ 挿入: [ 'navHome' ], 設定（） { // this.navHome にはアクセスできません ->未定義 (オプション API の前にロード) console.log("4. Container Nav でセットアップを呼び出す") }、 beforeCreate() { // this.navHome にはアクセスできません ->未定義 (オプション API の前にロード) console.log("5. Container Nav で Create の前に呼び出す") }、 作成した（） { // this.navHome にアクセスできる必要があります -> '/' (オプション API の後にロード) console.log("6. Container Nav での beforeCreate の呼び出し: ", this.$refs.navHome) }、 マウントされた() { // this.navHome にアクセスできる必要があります -> '/' (オプション API の後にロード) console.log("7. Container Nav での beforeCreate の呼び出し: ", this.$refs.navHome) } })</pre> <h1>尝试 1 - 测试</h1> <p>console.logs を使用して以下の代償会を実行すると、以下の結果が発生します:</p> <pre class="brush:php;toolbar:false;">1.ヘッダーでの呼び出し設定 2. ヘッダーでの beforeCreate の呼び出し: 未定義 ->正しい 3. ヘッダーで Provide を呼び出す 4. Container Nav でのセットアップの呼び出し 5. Container Nav での beforeCreate の呼び出し: 未定義 ->正しい 6. Container Nav で作成された呼び出し: 未定義 ->間違っています (「/」である必要があります) 7. Container Nav にマウントされた呼び出し: 未定義 ->間違っています (「/」である必要があります) 8. ヘッダーにマウントされた呼び出し: un 未定義 ->間違っています (「/」である必要があります) 9. ヘッダー内に作成された呼び出し: 未定義 ->間違っています (「/」である必要があります)</pre>

---

<h1>尝试 2 - header.vue（祖父母）</h1> <p><code>setup</code>の使用を除き、以前と同じコードと選択 API を使用します。 <code>provide</code>。</p> <pre class="brush:php;toolbar:false;">import {defineComponent, Provide } from 'vue' 「@/store」からparentStoreをインポートします 設定（） { // 1. この方法を試しました const navLinkHome =parentStore().getTextualData[0]?.navigation.links.home const navHome = Provide('navHome', navLinkHome) // 2. この方法を試しました const navHome = Provide('navHome',parentStore().getTextualData[0]?.navigation.links.home) 戻る { // 1 & 2 ナビホーム // そして、この方法でも navHome: Provide('navHome',parentStore().getTextualData[0]?.navigation.links.home) } }</pre> <h1>尝试 2 -container-nav.vue（子级）</h1> <pre class="brush:php;toolbar:false;">import {defineComponent, inject } from 'vue' 設定（） { const navHome = inject('navHome') 戻る { ナビホーム // これも試しましたが、上記と同じです。 ナビホーム: ナビホーム } }</pre> <h1>尝试 2 - 测试</h1> <p>console.logs を使用して以下の代償会を実行すると、以下の結果が発生します:</p> <pre class="brush:php;toolbar:false;">1.ヘッダーでの呼び出し設定 2. ヘッダーでの beforeCreate の呼び出し: 未定義 ->正しい 3. Container Nav でセットアップを呼び出す 4. Container Nav での beforeCreate の呼び出し: 未定義 ->正しい 5. Container Nav で作成された呼び出し: 未定義 ->間違っています (「/」である必要があります) 6. Container Nav にマウントされた呼び出し: un 未定義 ->間違っています (「/」である必要があります) 7. ヘッダーにマウントされた呼び出し: un 未定義 ->間違っています (「/」である必要があります) 8. ヘッダー内に作成された呼び出し: 未定義 ->間違っています (「/」である必要があります)</pre> <h2> 沈黙</h2>
<li><p>最初に、<code>header.vue</code> に注意しました。中は <code>provide() {}</code> を使用します。オプション API の場合、<code>navHome</code> を参照します。作成またはインストールする方法で <code>this.navHome</code> を使用することはできません。 <code>CreateComponentPublicInstance</code> にある 1 つの条文メッセージを受信しました。この問題を解決するために、<code>this.$refs.navHome</code>を使用するように変更しました。 - これが正しいかどうかさえ判断できません。 </li> <li><p>今度は、<code>container-nav.vue</code>にあります。パッケージ内で <code>inject を使用しています: [ 'navHome' ]</code>とき、我無法使用<code>this.navHome</code>そうだね。繰り返しますが、<code>this.$refs.navHome</code> を使用してのみアクセスできます。 </p> </li> </ul> <p>しかし。 </p>
<li><code>header.vue</code> のセットアップ メソッドで Provide を使用し、<code>container-nav.vue</code> のセットアップ メソッドで Inject を使用する場合、<code> を使用できます;this.navHome</code> は <code>navHome</code> にアクセスします。なぜこんなことをするのかはわかりません。 </li> </ul>

Answer 1

• これはリアクティブなオブジェクトではないため、parentStore().getTextualData[0]?.navigation.links.home の値が "/" であることを確認する必要があります。親による
• または、次のようなリアクティブ オブジェクトを提供できます:

リーリー

• this.$refs.navHome は間違った方法です。this.navHome は機能するはずです。ただし、Composition API スタイル
を使用することをお勧めします。
• 気になるのですが、すでに pinia ストアがあるのに、なぜ Provide/inject を使用する必要があるのですか?