Vue.js 创建菜单查询数据库答案

【问题标题】：Vue.js create menu querying databaseVue.js 创建菜单查询数据库
【发布时间】：2020-07-20 17:06:58
【问题描述】：

基于以下 VueSchool tuto https://vueschool.io/courses/vue-router-for-everyone 我正在尝试使用基于 10 月服务器中找到的应用程序列表的菜单创建 Vue 应用程序。我尝试用从数据库填充的应用程序 [] 替换静态目的地 []。

为此，我使用 Axios 和 Vuex。我可以查询数据，但我花了很多时间试图在应用程序加载时获取它，以创建菜单，然后再显示应用程序......

我有一个 main.js、一个 App.vue 和一个用于显示菜单的 MenuApp.vue 组件。我的问题是我的 getter 总是在我的突变之前被调用，并且我的应用程序数组在菜单创建时总是空的。

有没有办法在显示我的 vue.js 菜单组件之前正确加载和初始化所有数据???

或者我可以在突变后重新加载我的菜单组件吗？

感谢您的帮助；-)

【问题讨论】：

嗯，如果我没记错的话，你使用的是 vuex，所以它应该是 reactive。意味着数据何时从服务器到达并不重要。但是当数据从服务器到达时 vuex 应该更新存储并且您的菜单组件应该使用 vuex 存储显示它。如果它没有显示它那么你应该检查你的 vuex 商店并正确连接它
感谢 Hardik，我试图连接到所有应用程序的吸气剂，而不是状态应用程序。它现在可以工作了;-))
真的很奇怪。编译后显示工作，但是当我刷新页面时，菜单丢失了。如果我查看 DevTools，我的 vuex 存储仍然包含数据...我需要重新加载我的组件吗？
嗯我不确定你存储是否有数据，可能会有一些链接错误，因为存储和组件应该始终处于相同状态。如果 store 有数据，您的组件将永远不会为空。请检查您的商店连接 -> 组件。可能是你有条件地更新东西等
谢谢，它似乎与 vuex-persistedstate 的 add 一起工作

【解决方案1】：

您可以在加载主布局之前使用“加载”布局。从“加载”布局中，使用异步加载应用程序列表和您之前想要获取的所有数据。最后，只需切换到加载应用程序列表的主布局即可。

从 OctoberCMS 方面，我不知道您是如何提出请求的。但是，尝试使用简单的路由，调用路由器控制器，而不是使用组件。这将提出更直接的要求，并为您的最终项目带来更好的表现。

【讨论】：