javascript - 哪种将元素添加到 Vuex 状态属性的数组属性的方法是正确的？

Question

因此，我有一个向端点发出 POST 请求的操作，该端点为特定艺术品创建评论。在呈现艺术作品及其评论的组件上，我在 onMounted() Hook 中调度一个操作，该操作对具有该 ID 的艺术作品发出 GET 请求，然后将其存储在 Vuex 中。

一旦创建评论的 POST 请求通过，我就可以访问商店中的 artwork 属性，并将响应推送到 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 到现有的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 数组，有效地用它自己的一个新副本替换它，它包含所有其他未修改的图像和一个新版本的修改后的图像在相同的索引旧的。修改后的图像包含旧图像包含的所有内容，除了评论数组，由新数组替换，包含旧图像的所有内容以及新评论。