Wenn die Komponente geladen wird, sind Provide und Inject von Vue undefiniert.

Question

Situation

Ich versuche, die Options-API von Vue zum Bereitstellen und Einfügen von Funktionen zu verwenden, damit die Komponente header.vue Daten für den container-nav.vue bereitstellen kann ; Komponente (siehe Komponentenhierarchie). Wenn Daten jedoch injiziert werden, sind sie beim ersten Laden undefiniert.

Aktuelle Komponentenhierarchie:

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

Versuch 1 – header.vue (Großvater)

In dieser Komponente erhalte ich die folgende Zeichenfolge '/' in Provide() {}

import { defineComponent } from 'vue'
parentStore aus '@/store' importieren

Standard exportieren defineComponent({
    aufstellen() {
        // Sollte keinen Zugriff auf this.navHome haben -> undefiniert (wird vor der Options-API geladen)
        console.log("1. Setup im Header aufrufen")

        const storeCommon = parentStore()
        return { storeCommon }
    },
    beforeCreate() {
        // Sollte keinen Zugriff auf this.navHome haben -> undefiniert (wird vor der Options-API geladen)
        console.log("2. Aufruf von beforeCreate im Header")
    },
    bieten() {
        console.log("3. Provide im Header aufrufen")
        zurückkehren {
            navHome: this.storeCommon.textualData[0]?.navigation.links.home
        }
    },
    erstellt() {
        // Sollte Zugriff auf this.navHome haben -> '/' (wird nach der Options-API geladen)
        console.log("9. Aufruf von beforeCreate in Container Nav: ", this.$refs.navHome)
    },
    mount() {
        // Sollte Zugriff auf this.navHome haben -> '/' (wird nach der Options-API geladen)
        console.log("8. Aufruf von beforeCreate in Container Nav: ", this.$refs.navHome)
    }
})

Versuchen Sie 1 – container-nav.vue (untergeordnet)

In diese Komponente füge ich den navHome ein, der von der Komponente header.vue bereitgestellt wird.

import { defineComponent } from 'vue'

Standard exportieren defineComponent({
    injizieren: [ 'navHome' ],
    aufstellen() {
        // Sollte keinen Zugriff auf this.navHome haben -> undefiniert (wird vor der Options-API geladen)
        console.log("4. Setup in Container Nav aufrufen")
    },
    beforeCreate() {
        // Sollte keinen Zugriff auf this.navHome haben -> undefiniert (wird vor der Options-API geladen)
        console.log("5. Aufruf von beforeCreate in Container Nav")
    },
    erstellt() {
        // Sollte Zugriff auf this.navHome haben -> '/' (wird nach der Options-API geladen)
        console.log("6. Aufruf von beforeCreate in Container Nav: ", this.$refs.navHome)
    },
    mount() {
        // Sollte Zugriff auf this.navHome haben -> '/' (wird nach der Options-API geladen)
        console.log("7. Aufruf von beforeCreate in Container Nav: ", this.$refs.navHome)
    }
})

尝试 1 - 测试

使用 console.logs 运行以下代码会产生以下结果：

1. Aufruf des Setups im Header                                
2. Aufruf von beforeCreate im Header: undefiniert -> Richtig
3. Aufruf von Provide im Header
4. Setup im Container Nav aufrufen
5. Aufruf von beforeCreate im Container Nav: undefiniert -> Richtig
6. Aufruf in Container Nav erstellt: undefiniert -> Falsch (sollte „/“ sein)
7. Aufruf im Container Nav: undefiniert -> Falsch (sollte „/“ sein)
8. Aufruf im Header eingefügt: undefiniert -> Falsch (sollte „/“ sein)
9. Aufruf im Header erstellt: undefiniert -> Falsch (sollte „/“ sein)

---

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

使用与之前相同的代码和选项 API, 除了使用 setup und provide.

import { defineComponent, Provide } from 'vue'
parentStore aus '@/store' importieren

aufstellen() {
    // 1. Habe es auf diese Weise versucht
    const navLinkHome = parentStore().getTextualData[0]?.navigation.links.home
    const navHome = Provide('navHome', navLinkHome)

    // 2. Habe es auf diese Weise versucht
    const navHome = Provide('navHome', parentStore().getTextualData[0]?.navigation.links.home)

    zurückkehren {
        // 1 & 2
        navHome
        
        // Und auch hier entlang
        navHome: Provide('navHome', parentStore().getTextualData[0]?.navigation.links.home)
    }
}

尝试 2 – container-nav.vue（子级）

import { defineComponent, inject } from 'vue'

aufstellen() {
    const navHome = inject('navHome')

    zurückkehren {
        navHome

        // Habe das auch versucht, aber dasselbe wie oben, nur länger
        navHome: navHome
    }
}

尝试 2 - 测试

使用 console.logs 运行以下代码会产生以下结果：

1. Aufruf des Setups im Header                                
2. Aufruf von beforeCreate im Header: undefiniert -> Richtig
3. Setup im Container Nav aufrufen
4. Aufruf von beforeCreate in Container Nav: undefiniert -> Richtig
5. Aufruf im Container Nav erstellt: undefiniert -> Falsch (sollte „/“ sein)
6. Aufruf im Container Nav: undefiniert -> Falsch (sollte „/“ sein)
7. Aufruf im Header eingefügt: undefiniert -> Falsch (sollte „/“ sein)
8. Aufruf im Header erstellt: undefiniert -> Falsch (sollte „/“ sein)

混乱

• 首先,我注意到在 header.vue 中使用 provide() {} Optionen-API 时，并尝试引用 navHome 。Sie können dies auch tun: CreateComponentPublicInstance 类型上不存在.为了解决这个问题,我改为使用 this.$refs.navHome - 甚至不确定这是否是正确的做法.

• 其次,当在 container-nav.vue 组件中使用 inject: [ 'navHome' ] 时，我无法使用 this.navHome 访问它.Auch hier kann ich nur mit this.$refs.navHome darauf zugreifen.

Aber.

• Bei Verwendung von Provide in der Setup-Methode von header.vue und Inject in der Setup-Methode von container-nav.vue kann ich verwenden ;this.navHome greift auf navHome zu. Ich bin mir nicht sicher, warum das so ist.

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 商店，为什么还需要使用提供/注入？