페이로드에 전달된 Vuex 어레이 변환

페이로드에 전달된 Vuex 어레이 변환

다음 두 가지 접근법의 기술적 차이는 무엇입니까?예시는 사소하지만 거대한 중첩 객체가 있는 경우 변환 내에서 원하는 객체를 찾기 위해 많은 ID를 전달해야 합니다.

두 번째 예에서는 어레이를 전달하고 변환합니다.다시 말씀드리지만, 두 가지 예에서 동일한 푸시 방법을 호출합니다.내 말이 맞니?똑같아야지.

const state = () => ({
  cards: []
});

mutations: {
  addCard(state, card) {
    state.cards.push(card)
  }
}

// Component...

this.$store.commit('addCard', {...card});

그리고.

const state = () => ({
  cards: []
});

mutations: {
  addCard(state, data) {
    data.cards.push(data.card)
  }
}

// Component...

this.$store.commit('addCard', { cards: this.$store.cards, card: {...card} }); 

기술적인 차이가 뭐죠?

둘 사이에 문자 그대로의 차이가 뭔지 묻는 게 아닌 건 알지만, 일단 분명히 해두죠.

• 첫 번째 스니펫에서는 새로운 아이템을 전달하고 변환된 아이템을 통해 액세스한 어레이 상태에 추가합니다.state논쟁.
• 두 번째 스니펫에서는 어레이 상태와 항목을 모두 전달하고 대신 payload를 통해 어레이에 액세스합니다.

다시 말씀드리지만, 두 가지 예에서 우리는 동일한 푸시 방법을 호출합니다.내 말이 맞니?

네, 이 둘은 정확히 같은 결과를 얻습니다.mutation 인수를 통해 액세스하든 payload를 통해 액세스하든 배열 상태는 완전히 동일한 개체입니다(즉,===).

두 번째 스니펫의 패턴은 찾은 것처럼 깊이 중첩된 상태를 변환할 때 매우 유용합니다.단점은 나중에 코드를 배우려고 하는 사람에게 무엇이 변이되고 있는지 잘 모를 수 있다는 것입니다.

언급URL : https://stackoverflow.com/questions/66338516/mutate-vuex-array-passed-in-the-payload