Apabila komponen dimuatkan, Vue's Provide dan Inject tidak ditentukan.

Question

Situasi

Saya cuba menggunakan API pilihan Vue untuk menyediakan dan menyuntik kefungsian supaya komponen header.vue dapat memberikan data kepada container-nav.vue ; komponen ( Lihat hierarki komponen). Walau bagaimanapun, apabila data disuntik, ia tidak ditentukan pada beban awal.

Hierarki komponen semasa:

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

Percubaan 1 - header.vue (datuk nenek)

Dalam komponen ini saya mendapat rentetan '/' di dalam Provide() {}

import { defineComponent } daripada 'vue'
import parentStore dari '@/store'

eksport lalai defineComponent({
    persediaan() {
        // Seharusnya tidak mempunyai akses kepada this.navHome ->
        console.log("1. Persediaan panggilan dalam Pengepala")

        const storeCommon = parentStore()
        pulangkan { storeCommon }
    },
    beforeCreate() {
        // Seharusnya tidak mempunyai akses kepada this.navHome ->
        console.log("2. Memanggil sebelumCreate dalam Pengepala")
    },
    sediakan() {
        console.log("3. Panggilan disediakan dalam Pengepala")
        kembali {
            navHome: this.storeCommon.textualData[0]?.navigation.links.home
        }
    },
    dicipta() {
        // Harus mempunyai akses kepada this.navHome ->
        console.log("9. Memanggil beforeCreate dalam Container Nav: ", this.$refs.navHome)
    },
    dipasang() {
        // Harus mempunyai akses kepada this.navHome ->
        console.log("8. Memanggil beforeCreate dalam Container Nav: ", this.$refs.navHome)
    }
})

Cuba 1 - container-nav.vue (kanak-kanak)

Dalam komponen ini, saya menyuntik navHome yang disediakan oleh komponen header.vue

import { defineComponent } daripada 'vue'

eksport lalai defineComponent({
    inject: [ 'navHome' ],
    persediaan() {
        // Seharusnya tidak mempunyai akses kepada this.navHome -> tidak ditentukan (dimuatkan sebelum API pilihan)
        console.log("4. Persediaan panggilan dalam Container Nav")
    },
    beforeCreate() {
        // Seharusnya tidak mempunyai akses kepada this.navHome -> tidak ditentukan (dimuatkan sebelum API pilihan)
        console.log("5. Memanggil sebelumCreate dalam Container Nav")
    },
    dicipta() {
        // Harus mempunyai akses kepada this.navHome -> '/' (dimuatkan selepas API pilihan)
        console.log("6. Memanggil beforeCreate dalam Container Nav: ", this.$refs.navHome)
    },
    dipasang() {
        // Harus mempunyai akses kepada this.navHome -> '/' (dimuatkan selepas API pilihan)
        console.log("7. Memanggil beforeCreate dalam Container Nav: ", this.$refs.navHome)
    }
})

尝试 1 - 测试

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

1. Persediaan panggilan dalam Pengepala                                
2. Memanggil beforeCreate dalam Pengepala: undefined -> Betul
3. Memanggil Sediakan dalam Pengepala
4. Persediaan panggilan dalam Container Nav
5. Memanggil beforeCreate in Container Nav: undefined -> Betul
6. Panggilan dibuat dalam Container Nav: undefined -> Tidak betul (sepatutnya '/')
7. Panggilan dipasang dalam Container Nav: undefined -> Tidak betul (sepatutnya '/')
8. Panggilan dipasang dalam Pengepala: undefined -> Tidak betul (sepatutnya '/')
9. Panggilan dibuat dalam Pengepala: undefined -> Tidak betul (sepatutnya '/')

---

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

使用与之前相同的代码和选项 API，除了使用 setup 和 berikan。

import { defineComponent, sediakan } daripada 'vue'
import parentStore dari '@/store'

persediaan() {
    // 1. Cuba cara ini
    const navLinkHome = parentStore().getTextualData[0]?.navigation.links.home
    const navHome = menyediakan('navHome', navLinkHome)

    // 2. Cuba cara ini
    const navHome = menyediakan('navHome', parentStore().getTextualData[0]?.navigation.links.home)

    kembali {
        // 1 & 2
        navHome
        
        // Dan juga dengan cara ini
        navHome: provide('navHome', parentStore().getTextualData[0]?.navigation.links.home)
    }
}

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

import { defineComponent, inject } daripada 'vue'

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

    kembali {
        navHome

        // Cuba ini juga, tetapi sama seperti di atas hanya lebih lama
        navHome: navHome
    }
}

尝试 2 - 测试

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

1. Persediaan panggilan dalam Pengepala                                
2. Memanggil beforeCreate dalam Pengepala: undefined -> Betul
3. Persediaan panggilan dalam Container Nav
4. Memanggil beforeCreate dalam Container Nav: undefined -> Betul
5. Panggilan dibuat dalam Container Nav: undefined -> Tidak betul (sepatutnya '/')
6. Panggilan dipasang dalam Container Nav: undefined -> Tidak betul (sepatutnya '/')
7. Panggilan dipasang dalam Pengepala: undefined -> Tidak betul (sepatutnya '/')
8. Panggilan dibuat dalam Pengepala: undefined -> Tidak betul (sepatutnya '/')

混乱

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

• 其次，当在 container-nav.vue 组件中使用 inject: [ 'navHome' ] 时，我无法使用 this.navHome 访问它。Sekali lagi, saya hanya boleh mengaksesnya menggunakan this.$refs.navHome.

Tetapi.

• Apabila menggunakan Provide dalam kaedah persediaan header.vue dan Inject dalam kaedah persediaan container-nav.vue, saya boleh menggunakan < ;code> ;this.navHome mengakses navHome Tidak pasti mengapa ia melakukan ini.

Answer 1

• Anda perlu pastikan parentStore().getTextualData[0]?.navigation.links.home 在父级提供时具有值 "/"kerana ia bukan objek reaktif
• Atau anda boleh menyediakan objek reaktif seperti ini:

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

• this.$refs.navHome 是错误的方式，this.navHome Ia sepatutnya berkesan. Walau bagaimanapun, saya mengesyorkan anda menggunakan gaya API Gabungan
• Saya pelik, awak dah ada kedai pinia, kenapa perlu guna provide/inject?