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

Question

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

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

这是我创建评论并将响应推送到所选艺术作品评论的操作属性:

    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

您可以创建突变：

const mutations = {
  addComment(state, comment) {
    state.image = { 
      ...state.image,
      comments: [ ...state.image.comments, comment]
    }
  },
},

然后提交您的操作：

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

Answer 2

从状态中获取对象并改变其属性违反“单一事实来源”的原则 所有更改，这就是您首先使用商店的原因。
您必须用自身的修改版本替换状态中的对象。在您的情况下，突变可能是这样的：

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 数组，有效地用它自己的新副本替换它，它包含所有其他未修改的图像和修改后的图像的新版本，索引与旧的。修改后的图像包含旧图像包含的所有内容，除了评论数组，替换为新数组，包含旧图像的所有内容，加上新评论。

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

Which method of adding an element to the array property of a Vuex state property correct?

javascript

vue.js

vuex

vuejs2

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

Which method of adding an element to the array property of a Vuex state property correct?

javascript

vue.js

vuex

vuejs2

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