组件加载时，Vue的Provide和Inject出现未定义的情况

Question

<p><br /></p><h2>情况</h2> <p>我正在尝试使用 Vue 的提供和注入功能的选项 API，以便 <code>header.vue</code> 组件可以向 <code>container-nav.vue</code> 组件提供数据（请参阅组件层次结构）。但是，当注入数据时，它在初始加载时是未定义的。</p> <p><strong>当前组件层次结构：</strong></p> <ul> <li>header.vue > header-nav-menu.vue > 容器-nav.vue</li> </ul> <h1>尝试 1 - header.vue（祖父母）</h1> <p>在此组件中，我从 pinia (storeCommon) 获取 <code>Provide() {}</code> 内的以下字符串 <code>'/'</code>。</p> <pre class="brush:php;toolbar:false;">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) } })</pre> <h1>尝试 1 - container-nav.vue（子级）</h1> <p>在此组件中，我注入由 <code>header.vue</code> 组件提供的 <code>navHome</code>。</p> <pre class="brush:php;toolbar:false;">从 'vue' 导入 {defineComponent } 导出默认定义组件（{ 注入：['navHome']， 设置（） { // 不应该访问 this.navHome ->未定义（在选项 API 之前加载） console.log("4. 在 Container Nav 中调用设置") }, 创建之前() { // 不应该访问 this.navHome ->未定义（在选项 API 之前加载） console.log("5. Container Nav 中调用 beforeCreate") }, 创建（）{ // 应该可以访问 this.navHome -> '/'（在选项 API 之后加载） console.log("6. 在容器导航中调用 beforeCreate: ", this.$refs.navHome) }, 安装（）{ // 应该可以访问 this.navHome -> '/'（在选项 API 之后加载） console.log("7. 在容器导航中调用 beforeCreate: ", this.$refs.navHome) } })</pre> <h1>尝试 1 - 测试</h1> <p>使用 console.logs 运行以下代码会产生以下结果：</p>

1.调用 Header 中的设置                                
2、在Header中调用beforeCreate：undefined ->正确的
3. 在Header中调用Provide
4. 在Container Nav中调用setup
5、Container Nav中调用beforeCreate：undefined ->正确的
6. 在 Container Nav 中创建的调用：未定义 ->不正确（应该是“/”）
7、在Container Nav中调用mounted：undefined ->不正确（应该是“/”）
8. 调用mounted在Header中：undefined ->不正确（应该是“/”）
9. Header 中创建的调用：undefined ->不正确（应为“/”）

<小时/>>

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

使用与相同的代码和选项 API 之前，除了使用 setup 和 提供。</p> <pre class="brush:php;toolbar:false;">从 'vue' 导入 {defineComponent, Provide } 从“@/store”导入parentStore 设置（） { // 1.尝试过这种方式 const navLinkHome = ParentStore().getTextualData[0]?.navigation.links.home const navHome = 提供('navHome', navLinkHome) // 2.尝试过这种方式 const navHome = Provide('navHome',parentStore().getTextualData[0]?.navigation.links.home) 返回 { // 1 & 2 导航首页 // 也是这样 navHome：提供（'navHome'，parentStore（）.getTextualData [0]？.navigation.links.home） } }</pre>

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

<pre class="brush:php;toolbar:false;">从 'vue' 导入 {defineComponent, Inject } 设置（） { const navHome = 注入('navHome') 返回 { 导航首页 // 也尝试过，但与上面相同，只是时间更长 导航首页： 导航首页 } }</pre> <h1>尝试 2 - 测试</h1> <p>使用 console.logs 运行以下代码会产生以下结果：</p>

1.调用 Header 中的设置                                
2、在Header中调用beforeCreate：undefined ->正确的
3. 在Container Nav中调用setup
4、Container Nav中调用beforeCreate：undefined ->正确的
5. 在 Container Nav 中创建的调用：未定义 ->不正确（应该是“/”）
6、在Container Nav中调用mounted：undefined ->不正确（应该是“/”）
7. 调用mounted在Header中：undefined ->不正确（应该是“/”）
8. Header 中创建的调用：undefined ->不正确（应为“/”）

<h2>混乱</h2>

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

• 其次，当在 container-nav.vue 时 组件中使用 inject: [ 'navHome' ]; 当时，我无法使用 this.navHome 访问它。同样，我只能使用 <code>this.$refs.navHome</code> 访问它。</p> </li> </ul> <p>但是。</p> <ul> <li>当在 <code>header.vue</code> 的设置方法中使用 Provide 并在 <code>container-nav.vue</code> 的设置方法中使用 Inject 时，我可以使用 <code>this.navHome</code> 访问 <code>navHome</code> 。不知道为什么这样做。</li> </ul><p><br /></p>

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