Question

我是Vue的新手，最近才是Vuex的新手，他试图弄清楚在提交操作后如何使用vuex在全局状态内更改特定帖子。

这是国家的一个例子。

// Array of posts

[
    { 
        id: 1,
        body: "This is an example post",
        comments: [
            { id: 1, body: "This is a comment" }
        ]
    },
    { 
        id: 2,
        body: "This is an example post 2",
        comments: [
            { id: 1, body: "This is a comment 2" }
        ]
    },
    { 
        id: 3,
        body: "This is an example post 3",
        comments: [
            { id: 1, body: "This is a comment 3" }
        ]
    },
]

这是我旨在添加新评论的操作。注释已在数据库中成功创建，但是在尝试突变子属性时，我一直坚持寻找一种将注释推入状态的正确部分的方法。

const actions = {
    async new_post() {
        ...
    },
    async new_comment({ commit }, data) {
    const response = await axios.post(
      'http://localhost:3000/api/posts/' + data.id + '/comments/new', {
        body: data.body
      }
    );
    commit('new_comment', {
      res: response.data, // The object (comment) I want to push into a specific post
      id: data.id, // The id of the post I want to push the comment into
    })
  }
}

const mutations = {
  new_comment: (state, incoming) => {
    state.posts.filter(post => post._id === incoming.id) // Is the post I want to update
    console.log(incoming.res) // The object I want to update the post.comments with.
    } 
}

有什么想法吗？

Answer 1

您可以尝试将“对象数组” 更改为和“对象对象” ，并为每个对象赋予键，如下所示：


{
  1: {
      .....
     },
  2: {
      .....
     }
....
}

然后您可以通过按其键调用它们来添加对象，该键应与 id 相同。

Answer 2

您可以使用地图来实现。

尝试此代码。

state.posts = state.posts.map(function (post) {
        if (post.id === incoming.id) {
          return incoming
        }
        return item
      })

如何在vuex状态下推送到特定数组项

2 个答案: