如果我在 vue 路由器中有多个带有输入字段的组件，我应该如何获取数据并将其存储在 vuex 中？

Posted 2023-02-22

【中文标题】如果我在 vue 路由器中有多个带有输入字段的组件，我应该如何获取数据并将其存储在 vuex 中？

【英文标题】：If I have multiple components with input fields in vue router, how should I fetch data and store it in vuex?

【发布时间】：2020-06-08 23:15:36

【问题描述】：

在我的 vue cli 项目中，我有一个带有 3 个子组件 SettingsA、SettingsB 和 SettingsC 的路由 Settings .每个子组件都有 ca。 15 个输入字段，因此单个组件的输入字段过多。

目标是在加载 RouteSettings 时通过 axios 调用从 REST 后端获取数据，并使用数据填充一些输入字段； 然后，用户可以在子组件之间导航并填充/更改输入字段，而无需触发 axios 调用，该调用将重新加载并覆盖用户输入字段更改。

由于有 3 个子组件，我使用 vuex 作为存储。这样，当他在子组件之间导航时，用户的输入不应该改变。

我的问题是：我应该在哪里以及使用什么钩子进行 axios 调用？在 Settings 组件上使用 beforeMounted？

也许还有比我更好的、已经尝试过的设计？

感谢您的帮助！

【参考方案1】：

使用custom events的解决方案

您实际上不一定需要 vuex。基本思想是有父组件Settings，其中包括SettingsA、SettingsB和SettingsC，它们使用v-if有条件地显示。 Settings 组件保存着你的状态。子组件表单字段中的更改会触发带有this.$emit() 的事件。父组件监听事件并更新其状态。表单的状态通过props 传递。

使用Vuex actions的解决方案

如果您走Vuex 路线，您将触发actions 而不是使用this.$emit() 并更新全局存储。您应该使用mapActions 导入操作。然后，在您的组件中，您可以使用 this.$store 访问全局存储。