Блог

Я новичок в 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.
    } 
}
  

Есть какие-нибудь идеи?

Вы можете достичь этого с помощью map.

Попробуйте этот код.

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

Вы могли бы попробовать изменить свой «Массив объектов» на и «Объект объектов» и присвоить каждому объекту такой ключ:

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

  

затем вы можете добавлять к ним объекты, вызывая их по их ключу, который должен совпадать с идентификатором.