When the component is loaded, Vue's Provide and Inject are undefined.

Question

Situation

I'm trying to use Vue's options API for providing and injecting functionality so that the header.vue component can provide data to the container-nav.vue component ( See component hierarchy). However, when data is injected, it is undefined on initial load.

Current component hierarchy:

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

Attempt 1 - header.vue (grandparent)

In this component I get the following string '/' inside Provide() {} from pinia (storeCommon).

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)
    }
})

Try 1 - container-nav.vue (child)

In this component, I inject the navHome provided by the header.vue component.

import { defineComponent } from 'vue'

export default defineComponent({
    inject: [ 'navHome' ],
    setup() {
        // Should not have access to this.navHome -> undefined (loads before options API)
        console.log("4. Calling setup in Container Nav")
    },
    beforeCreate() {
        // Should not have access to this.navHome -> undefined (loads before options API)
        console.log("5. Calling beforeCreate in Container Nav")
    },
    created() {
        // Should have access to this.navHome -> '/' (loads after options API)
        console.log("6. Calling beforeCreate in Container Nav: ", this.$refs.navHome)
    },
    mounted() {
        // Should have access to this.navHome -> '/' (loads after options API)
        console.log("7. Calling beforeCreate in Container Nav: ", this.$refs.navHome)
    }
})

尝试 1 - 测试

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

1. Calling setup in Header                                
2. Calling beforeCreate in Header: undefined              -> Correct
3. Calling Provide in Header
4. Calling setup in Container Nav
5. Calling beforeCreate in Container Nav: undefined       -> Correct
6. Calling created in Container Nav: undefined            -> Incorrect (should be '/')
7. Calling mounted in Container Nav: undefined            -> Incorrect (should be '/')
8. Calling mounted in Header: undefined                   -> Incorrect (should be '/')
9. Calling created in Header: undefined                   -> Incorrect (should be '/')

---

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

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

import { defineComponent, provide } from 'vue'
import parentStore from '@/store'

setup() {
    // 1. Tried this way
    const navLinkHome = parentStore().getTextualData[0]?.navigation.links.home
    const navHome = provide('navHome', navLinkHome)

    // 2. Tried this way
    const navHome = provide('navHome', parentStore().getTextualData[0]?.navigation.links.home)

    return {
        // 1 & 2
        navHome
        
        // And also this way
        navHome: provide('navHome', parentStore().getTextualData[0]?.navigation.links.home)
    }
}

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

import { defineComponent, inject } from 'vue'

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

    return {
        navHome

        // Tried this too, but same as above just longer
        navHome: navHome
    }
}

尝试 2 - 测试

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

1. Calling setup in Header                                
2. Calling beforeCreate in Header: undefined              -> Correct
3. Calling setup in Container Nav
4. Calling beforeCreate in Container Nav: undefined       -> Correct
5. Calling created in Container Nav: undefined            -> Incorrect (should be '/')
6. Calling mounted in Container Nav: undefined            -> Incorrect (should be '/')
7. Calling mounted in Header: undefined                   -> Incorrect (should be '/')
8. Calling created in Header: undefined                   -> Incorrect (should be '/')

混乱

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

• 其次，当在 container-nav.vue 组件中使用 inject: [ 'navHome' ] 时，我无法使用 this.navHome 访问它。Again, I can only access it using this.$refs.navHome.

But.

• When using Provide in the setup method of header.vue and Inject in the setup method of container-nav.vue, I can use < ;code>this.navHome accesses navHome . Not sure why it does this.

Answer 1

• You need to make sure parentStore().getTextualData[0]?.navigation.links.home has the value "/" as it is not a reactive object when provided by the parent
• Or you can provide a reactive object like this:

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

• this.$refs.navHome is the wrong way, this.navHome should work. However, I recommend that you use the Composition API style
• I'm curious, you already have a pinia store, why do you need to use provide/inject?