Vuex 상태 속성의 어레이 속성에 요소를 추가하는 올바른 방법은 무엇입니까?

Vuex 상태 속성의 어레이 속성에 요소를 추가하는 올바른 방법은 무엇입니까?

따라서 특정 아트워크의 코멘트를 작성하는 엔드포인트에 POST 요구를 하는 액션이 있습니다.아트워크와 그 코멘트를 렌더링하는 컴포넌트에 대해 해당 ID로 아트워크에 대해 GET 요구를 하는 액션을 onMounted() 후크에 디스패치하여 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)
        }
    },

다른 방법은 아트워크를 주에서 복사하고 복사본의 댓글 속성에 새 주석을 누른 다음 새 개체를 커밋하는 것입니다.

상태로부터 객체를 가져와 속성을 변환하는 것은 모든 변경에 대해 "하나의 진실 소스" 원칙을 위반하는 것이며, 따라서 처음부터 스토어를 사용해야 합니다.
상태의 개체를 수정된 버전의 개체로 교체해야 합니다.당신의 경우 돌연변이는 다음과 같습니다.

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어레이를 배치하면 다른 모든 미수정 이미지 및 변경된 이미지의 새 버전을 이전 버전과 동일한 인덱스로 포함하는 자신의 새 복사본으로 효과적으로 대체됩니다.변경된 이미지에는 주석 배열을 제외한 이전 이미지에 포함된 모든 내용이 포함됩니다. 주석 배열은 새 배열로 대체되며 이전 이미지에 포함된 모든 내용과 새 주석을 포함합니다.

변환을 작성할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/70296753/which-method-of-adding-an-element-to-the-array-property-of-a-vuex-state-property