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.