向Vuex状态属性的数组属性中添加元素的哪种方法正确？

Question

因此，我有一个操作，它向端点发出POST请求，为特定的艺术品创建评论。在呈现艺术品及其注释的组件上，我在onMounted()钩子中发出一个动作，使用该id对艺术品发出GET请求，然后将其存储在Vuex中。

一旦创建评论的POST请求通过，我就可以访问商店中的艺术品属性，只需将响应推送到注释属性(这是一个注释数组)。但我不知道这是否是正确的方法，因为据我所知，任何状态更改都应该通过突变来完成，所以直接访问状态并将数组元素推入其中似乎是不正确的？

这是我的操作，它创建一个注释并将响应推送到选定的艺术品的comments属性：

    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)
        }
    },

我想另一种选择是从状态复制艺术品，在复制的注释属性中推送新的注释，然后提交新的对象？

Answer 1

从状态获取对象并对其属性进行变异()违反了(所有更改的“一个真理源”的原则)，这就是为什么您首先要使用一个存储。

您必须将状态中的对象替换为其自身的修改版本。在你的例子中，以下是突变的样子：

this.$store.commit('ADD_COMMENT', comment);
// in store:
mutations: {
  ADD_COMMENT(state, comment) {
    state.image = { 
      ...state.image,
      comments: [ ...(state.image.comments || []), comment]
    }
  }
}

这也可以通过push-ing实现--将注释放到现有的comments数组中。但是你仍然需要替换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 };

重要的：突变状态只能在突变函数中发生。如果发生在外面，Vue会警告你。有时它可能会工作(就像在里面一样，您可能实际上看到了组件中的更改，并且它可能正确地呈现)，但它不能保证工作正常。

示例更新状态数组中的对象：

如果图像是存储在状态中的数组的一部分(比如images)，并且考虑到每个图像都有一个唯一的标识符id，那么下面是如何做到的：

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]
      });
    }
  }
}

上述突变使images数组处于适当位置，有效地将其替换为自身的一个新副本，该副本包含所有未经修改的其他图像和与旧图像相同索引的修改后的图像的新版本。修改后的图像包含旧图像所包含的所有内容，但注释数组除外，该数组替换为新数组，包含旧数组的所有内容，加上新注释。