Vue-如何验证Vuex存储中的数据

时间:2019-09-11 13:10:00

标签: vue.js vuelidate

我有一个相当大的表单,我将其发布到API后端。该表单大约有17-20个字段,具体取决于复选框的状态。

我的计划是,在用户填写表格后,我将使用Vuelidate对其进行验证,然后显示数据摘要,以便用户可以查看其数据。用户查看数据并认为正确后,会将表单发布到后端API。

为此,我计划使用Vuex存储表单对象,并使用存储在表单以及摘要页面上显示字段。

将表单对象存储在Vuex中是一种好方法吗?如果是这样,我在store.js中定义验证规则的位置? 非常感谢您的反馈!

1 个答案:

答案 0 :(得分:4)

您实际上并不需要 Vuex。 您可以将表单验证规则保留在组件本身中。如果您有负责表单的表单生成器或其他组件,则可以在其中保留验证规则,或者通过prop从要使用表单的组件中接受整个表单模型。

提交完成后,您可以通过路由本身将数据传递到“摘要”页面。检查一下-https://router.vuejs.org/guide/essentials/passing-props.html

每当您考虑Vuex或任何状态管理解决方案时,都考虑该数据的生命周期。需要持续多长时间。在大多数情况下,您会发现它属于一个或两个视图。

Vuex适用于需要一条数据才能持续更长的时间(可能是整个应用程序持续时间)的情况。示例-用户详细信息,主题设置,体验配置等。

让我知道怎么回事。