Lorsque le composant est chargé, Provide et Inject de Vue ne sont pas définis.

Question

Situation

J'essaie d'utiliser l'API d'options de Vue pour fournir et injecter des fonctionnalités afin que le composant header.vue ; composant (Voir hiérarchie des composants). Cependant, lorsque les données sont injectées, elles ne sont pas définies lors du chargement initial.

Hiérarchie actuelle des composants :

• header.vue > header-nav-menu.vue >

Tentative 1 - header.vue (grand-parent)

Dans ce composant, j'obtiens la chaîne suivante '/' à l'intérieur de Provide() {}

import { definitionComponent } depuis 'vue'
importer le parentStore depuis '@/store'

exporter le composant défini par défaut ({
    installation() {
        // Ne devrait pas avoir accès à this.navHome -> non défini (charge avant l'API des options)
        console.log("1. Appel de la configuration dans l'en-tête")

        const storeCommon = parentStore()
        retourner { storeCommon }
    },
    avantCréer() {
        // Ne devrait pas avoir accès à this.navHome -> non défini (charge avant l'API des options)
        console.log("2. Appel avantCreate dans l'en-tête")
    },
    fournir() {
        console.log("3. Appel de provide dans l'en-tête")
        retour {
            navHome : this.storeCommon.textualData[0]?.navigation.links.home
        }
    },
    créé() {
        // Doit avoir accès à this.navHome -> '/' (charge après l'API des options)
        console.log("9. Appel de beforeCreate dans Container Nav : ", this.$refs.navHome)
    },
    monté() {
        // Doit avoir accès à this.navHome -> '/' (charge après l'API des options)
        console.log("8. Appel de beforeCreate dans Container Nav : ", this.$refs.navHome)
    }
})</pré>
<h1>Essayez 1 - conteneur-nav.vue (enfant)</h1>
<p>Dans ce composant, j'injecte le <code>navHome</code> fourni par le composant <code>header.vue</code></p>
<pre class="brush:php;toolbar:false;">import { definitionComponent } depuis 'vue'

exporter le composant défini par défaut ({
    injecter : [ 'navHome' ],
    installation() {
        // Ne devrait pas avoir accès à this.navHome -> non défini (se charge avant l'API des options)
        console.log("4. Appel de la configuration dans Container Nav")
    },
    avantCréer() {
        // Ne devrait pas avoir accès à this.navHome -> non défini (se charge avant l'API des options)
        console.log("5. Appel avantCreate dans Container Nav")
    },
    créé() {
        // Doit avoir accès à this.navHome -> '/' (charge après l'API des options)
        console.log("6. Appel de beforeCreate dans Container Nav : ", this.$refs.navHome)
    },
    monté() {
        // Doit avoir accès à this.navHome -> '/' (charge après l'API des options)
        console.log("7. Appel de beforeCreate dans Container Nav : ", this.$refs.navHome)
    }
})</pré>
<h1>尝试 1 - 测试</h1>
<p>使用 console.logs 运行以下代码会产生以下结果：</p>
<pre class="brush:php;toolbar:false;">1. Appel de la configuration dans l'en-tête                                
2. Appel de beforeCreate dans l'en-tête : non défini -> Correct
3. Appel de Provide dans l'en-tête
4. Appel de la configuration dans Container Nav
5. Appel de beforeCreate dans Container Nav : non défini -> Correct
6. Appel créé dans Container Nav : non défini -> Incorrect (devrait être '/')
7. Appel monté dans Container Nav : non défini -> Incorrect (devrait être '/')
8. Appel monté dans l'en-tête : non défini -> Incorrect (devrait être '/')
9. Appel créé dans l'en-tête : non défini -> Incorrect (devrait être '/')

尝试 2 - header.vue（祖父母）

使用与之前相同的代码和选项 API, andlt;code>setup Et provide。

import { definitionComponent, provide } depuis 'vue'
importer le parentStore depuis '@/store'

installation() {
    // 1. Essayé de cette façon
    const navLinkHome = parentStore().getTextualData[0]?.navigation.links.home
    const navHome = fournir('navHome', navLinkHome)

    // 2. Essayé de cette façon
    const navHome = provide('navHome', parentStore().getTextualData[0]?.navigation.links.home)

    retour {
        // 1 & 2
        navAccueil
        
        // Et aussi de cette façon
        navHome : provide('navHome', parentStore().getTextualData[0]?.navigation.links.home)
    }
}</pré>
<h1>尝试 2 - conteneur-nav.vue（子级）</h1>
<pre class="brush:php;toolbar:false;">import { definitionComponent, inject } depuis 'vue'

installation() {
    const navHome = injecter('navHome')

    retour {
        navAccueil

        // J'ai essayé ça aussi, mais comme ci-dessus, juste plus longtemps
        navHome : navHome
    }
}</pré>
<h1>尝试 2 - 测试</h1>
<p>使用 console.logs 运行以下代码会产生以下结果：</p>
<pre class="brush:php;toolbar:false;">1. Appel de la configuration dans l'en-tête                                
2. Appel de beforeCreate dans l'en-tête : non défini -> Correct
3. Appel de la configuration dans Container Nav
4. Appel de beforeCreate dans Container Nav : non défini -> Correct
5. Appel créé dans Container Nav : non défini -> Incorrect (devrait être '/')
6. Appel monté dans Container Nav : non défini -> Incorrect (devrait être '/')
7. Appel monté dans l'en-tête : non défini -> Incorrect (devrait être '/')
8. Appel créé dans l'en-tête : non défini -> Incorrect (devrait être '/')

混乱

• 首先，我注意到在 header.vue C'est provide() {} Options API 时，并尝试引用 navHome。我无法在创建或安装的方法中使用 this.navHome 。我会收到一条错误消息，说它在 CreateComponentPublicInstance 类型上不存在。为了解决这个问题，我改为使用 this.$refs.navHome - 甚至不确定这是否是正确的做法。

  ≪/li>

• 其次，当在 container-nav.vue 组件中使用 inject : [ 'navHome' ] 时，我无法使用 this.navHome 访问它。Encore une fois, je ne peux y accéder qu'en utilisant this.$refs.navHome.

  ≪/li>

Mais.

• Lorsque j'utilise Provide dans la méthode de configuration de header.vue et Inject dans la méthode de configuration de container-nav.vue, je peux utiliser ;this.navHome accède à navHome Je ne sais pas pourquoi il fait ça. ≪/li>

Answer 1

• Vous devez vous en assurer parentStore().getTextualData[0]?.navigation.links.home 在父级提供时具有值 "/"car ce n'est pas un objet réactif
• Ou vous pouvez fournir un objet réactif comme celui-ci :

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

• this.$refs.navHome 是错误的方式，this.navHome Ça devrait marcher. Cependant, je vous recommande d'utiliser le Style API combiné
• Je suis curieux, vous avez déjà un magasin de pinia, pourquoi avez-vous besoin d'utiliser provide/inject ?