Así que tengo una acción que realiza una solicitud POST a un punto final que crea un comentario para una obra de arte en particular. En los componentes que representan la obra de arte y sus comentarios, envío una acción en el gancho onMounted() que realiza una solicitud GET para la obra de arte con esa identificación y luego la almacena en Vuex.
Una vez que se procesa la solicitud POST que crea el comentario, puedo acceder a la propiedad de la obra de arte en la tienda y simplemente enviar la respuesta a la propiedad de comentarios, que es una matriz de comentarios. Sin embargo, no sé si esta es la forma correcta de hacerlo, ya que, por lo que entiendo, cualquier cambio de estado debe hacerse a través de mutaciones, por lo que acceder directamente al estado y empujar los elementos de la matriz parece incorrecto.
Esta es mi acción que crea un comentario y envía la respuesta a la propiedad de comentarios de la obra de arte seleccionada:
async createComment({commit, state}, payload){ try { let response = await axios.post("/createComment", payload) console.log(response) state.image.comments.push(response.data.comment) } catch (error) { console.log(error) } },Supongo que la alternativa es copiar la obra de arte del estado, insertar el nuevo comentario en la propiedad de comentarios de la copia y luego confirmar el nuevo objeto.
Puedes crear una mutación:
const mutations = { addComment(state, comment) { state.image = { ...state.image, comments: [ ...state.image.comments, comment] } }, },y luego cometer de su acción:
async createComment({commit, state}, payload){ try { let response = await axios.post("/createComment", payload) console.log(response) commit('addComment', response.data.comment); } catch (error) { console.log(error) } },Obtener un objeto del estado y mutar sus propiedades viola el principio de "una fuente de verdad" para todos los cambios, razón por la cual está utilizando una tienda en primer lugar.
Tienes que reemplazar el objeto en el estado con una versión modificada de sí mismo. Así es como se vería una mutación, en su caso:
this.$store.commit('ADD_COMMENT', comment); // in store: mutations: { ADD_COMMENT(state, comment) { state.image = { ...state.image, comments: [ ...(state.image.comments || []), comment] } } } Esto también se puede push insertando el comentario en la matriz de comments existente. Pero todavía tienes que reemplazar state.image :
// ❌ WRONG, you're not replacing the image: state.image.comments.push(coment); // ✅ CORRECT, you're replacing the image: const clone = { ...state.image }; clone.comments.push(comment); state.image = clone; // that's why most prefer the spread syntax, // to assign in one line, without using a const: // state.image = { ...state.image, [yourKey]: yourNewValue };Importante : el estado de mutación solo debe ocurrir dentro de las funciones de mutación. Si sucede afuera, Vue te avisará. A veces puede funcionar (por ejemplo, es posible que vea el cambio en el componente y se represente correctamente), pero no se garantiza que funcione.
Ejemplo de actualización de un objeto en una matriz de estado:
Si la imagen fuera parte de una matriz almacenada en el estado (por ejemplo, images ) y teniendo en cuenta que cada imagen tendría un id único, así es como podría hacerlo:
this.$store.commit('ADD_IMAGE_COMMENT', { id: image.id, comment }); // the mutation: mutations: { ADD_IMAGE_COMMENT(state, { id, comment }) { const index = state.images.findIndex(image => image.id === id); if (index > -1) { state.images.splice(index, 1, { ...state.images[index], comments: [...(state.images[index].comments || []), comment] }); } } } La mutación anterior muta la matriz de images en su lugar, reemplazándola efectivamente con una nueva copia de sí mismo, que contiene todas las demás imágenes sin modificar y una nueva versión de la imagen modificada en el mismo índice que la anterior. La imagen modificada contiene todo lo que contenía la anterior, excepto la matriz de comentarios, reemplazada por una nueva matriz que contiene todo lo que tenía la anterior, más el nuevo comentario.