在 Vue 中查找嵌套数组以存储新数据答案

【问题标题】：Finding nested array to store new data in Vue在 Vue 中查找嵌套数组以存储新数据
【发布时间】：2018-07-06 23:00:33
【问题描述】：

我是 Vue 和 Vuex 的新手，我正在尝试创建一个简单的待办事项应用程序，用户应该能够在其中创建拥有自己的待办事项集合的项目。然后将每个项目的待办事项分类为 initial、WIP 和 finished。通过路由projects/:id 可以查看项目，其中id 是项目的ID。我在每个项目的 Vuex 商店中的结构如下：

{
    title: "Lorem ipsum",
    description: "Lorem ipsum",
    id: "99149129492149214",
    todos: {
        initial: [
        {
            description: "Lorem ipsum dolor sit amet.",
            createdBy: "Tobias",
            id: "99149129492149215",
        }
        ],
        wip: [
        {
            description: "Lorem ipsum dolor sit amet.",
            createdBy: "Tobias",
            id: "99149129492149216",
        }
        ],
        finished: []
    }
}

我想创建这个函数，让用户通过单击一个按钮在项目中创建一个新的待办事项。然后应该将项目添加到 todos.initial 数组中，并使用每个待办事项遵循的相同对象结构。

例如，我知道如何创建一个新项目。然后，我将在 Projects.vue 中创建一个方法，该方法使用 Vuex 中的操作和突变，将 projects 数组的状态与新项目的数据一起推送到存储中。为此，除了将数据推送到哪个数组之外，我无需指定任何其他内容。

但是，我需要帮助理解的是如何告诉 Vuex 在我单击“添加待办事项”按钮的项目中推送一个数组。例如，如果用户正在查看带有路由 projects/99149129492149214 的项目并且用户单击“添加待办事项”按钮，我希望将新的待办事项推送到该特定项目的 todos.initial 数组。

这方面的最佳做法是什么？我在想我可能必须将当前查看的项目的 ID 传递给突变方法，但我不知道这是如何正确完成的。

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

我也在学习 Vuex，希望我的回答能对你有所帮助。

如果您的路线是projects/:id，您可以在“添加待办事项”方法中通过this.$route.params.id 轻松获取id。然后您可以将 id 传递到您的突变中，并按 id 搜索项目。

你的方法：

methods: {
   submitInitialTodo() {
      // your mutation for Vuex
      this.addInitialTodo(this.$route.params.id);
   }
}

在你的突变中：

mutations: {
   addInitialTodo(state, project_id) {
      // search project list by id and push to array
   }
}

【讨论】：