首页 > 解决方案 > 带有对象/对象数组的 Vuex 表单处理

问题描述

我一直在尝试使用 Vuex 为我的 Vue 应用程序实现一些功能。我注意到使用 Vuex 处理表单可能非常粗糙......我的整个应用程序几乎都基于需要在商店中跟踪的单个对象(至少,这是我的信念。也许有更好的选择? ) 该对象看起来像这样:

person: {
  basicInformation: {
    first: '',
    last: '',
    email: '',
    phone: '',
    street: '',
    city: '',
    position: '',
    website: '',
  },
  about: '',
  knowledge: '',
  experience: [
    {
      company: '',
      position: '',
      description: '',
      website: '',
      date: [],
    },
  ],
}

这些值应该由用户使用输入表单输入。没有 Vuex,这很容易。然后你可以简单地做这样的事情

使用 Vuex,它看起来像这样。为状态创建 getter 和 setter 的地方。这适用于单个“消息”项目。我不能让它与一个也包含嵌套对象和数组的大对象一起工作。我将如何在操作/突变中传递索引,以及如何在 getter 和 setter 中传递?我发现这篇文章与我的问题最相关。但我仍然无法让它工作。有人可以在这里帮助我并指出正确的方向吗?如果您需要更多信息,请随时询问。

标签: vue.jsvuejs2vuex

解决方案


推荐阅读