Vue路由器并从商店接收数据

Posted 2023-02-23

【中文标题】Vue路由器并从商店接收数据

【英文标题】：Vue router and recieving data from store

【发布时间】：2019-03-01 09:25:04

【问题描述】：

我需要你的帮助。有一个 Vue 应用程序，我在其中使用 vuex 商店和 vue-router。问题是我从 API 调用中获取存储数据，如果我从其他地方导航到 blabla/edit-profile 页面，则用户数据已经在存储中并且在组件中我可以使用 getter 接收到的这些数据。 但是，如果我在 create 或 mount 方法中重新加载页面获取器不包含任何数据。但是如果查看 Vuex 开发工具，我可以看到获取的数据。 如何解决此问题？

【问题讨论】：

您是否确保 API 调用在页面加载之前完成？听起来它可能在 API 调用完成之前创建/挂载页面，所以还没有任何数据 - 然后当你查看它已加载的开发工具时。可能很容易出错，但这只是我根据您的描述的猜测。

是第一页中的 API 调用（即/blabla）还是在 App.vue 中（或者你有 <router-view> 组件的任何地方？）

也许你可以去掉created和mounted钩子里面的getter，只在模板里面使用它们？

问题是 API 调用在页面创建/挂载时还没有完成。所以我需要以某种方式加载它们。或者在页面创建/挂载后加载数据。

首页有调用。实际上，该调用已添加到 App.vue。所以通常它们是在每一个上制作的。加载。

【参考方案1】：

您可以尝试在计算属性中使用它们，而不是在已安装或创建的属性中使用 getter。这样，它将确保在实际需要时加载您的数据https://vuejs.org/v2/guide/computed.html。

您也可以尝试检查警告https://vuejs.org/v2/guide/list.html#Caveats。数据在获取后可能对 Vuejs 加载不友好。

【讨论】：

谢谢！我会尝试这种方法