Lodash.remove를 사용하여 Vuex 변환을 통해 상태가 변경되어도 Vue 구성 요소에서 비활성 재렌더가 트리거되지 않음

Lodash.remove를 사용하여 Vuex 변환을 통해 상태가 변경되어도 Vue 구성 요소에서 비활성 재렌더가 트리거되지 않음

컴포넌트에서는 다음 컴포넌트의 배열을 수신하고 있습니다.Villager에의prop부모 컴포넌트로부터.상위 컴포넌트는 이 어레이를 다음 위치에서 가져옵니다.this.$store.state.

return this.$store.state.villages.find(value => value.id === 0).villagers

실행하다this.$store.mutation나중에 지정된 배열을 변경하도록 커밋합니다.이 변환은 아래 스크린샷에서 볼 수 있듯이 동작합니다.그러나 제가 있는 컴포넌트는 재렌더링이 되지 않고 2개의 아이템이 아닌 3개의 아이템이 표시되어 있습니다.

반응성 체인이 어딘가에서 끊어진 것 같은데 악마를 정확히 집어낼 수가 없어요.제가 생각하기에propsvalue는 리액티브메커니즘입니다스크린샷에서 볼 수 있듯이 값이 변경되었지만 그에 따라 DOM이 업데이트되지 않았습니다.

코드 발췌

나는 질문의 관련 부분을 추출하려고 했다.

스토어/index.ts

[...]
export default new Vuex.Store({
  state: {
    villages: [
      {
        id: 0,
        name: 'Peniuli',
        foundingDate: 20,
        villagers: [
          {
            id: '33b07765-0ec6-4600-aeb1-43187c362c5a1',
            name: 'Baltasar',
            bloodline: 'Gent',
            occupation: 'Farmer'
          },
[...]
   mutations: {
       disbandVillager (state, payload) {
         const villagerId = payload.id
         const village = state.villages.find(value => value.id === 0)
         console.debug('disbanding villager:', villagerId)
         if (!_.isNil(village)) {
           console.debug('bfore:', village.villagers)
           _.remove(village.villagers, function (n) {
             return n.id === villagerId
           })
           console.debug('after:', village.villagers)
         }
       }
     },
[...]

마을.표시하다

<template>
    <Villagers :villagers="playerVillage.villagers"></Villagers>
</template>
[...]
  computed: {
    playerVillage: function () {
      return this.$store.state.villages.find(value => value.id === 0)
    }
  }
[...]

마을 사람들.표시하다

<template>
  <v-container>
    <v-card v-for="villager in villagers" :key="villager.id">
      <v-row>
        <v-col>
          <v-card-title>Name: {{villager.name}}</v-card-title>
        </v-col>
        <v-col>
          <v-card-title>Bloodline: {{villager.bloodline}}</v-card-title>
        </v-col>
        <v-col>
          <v-card-title>Occupation: {{villager.occupation}}</v-card-title>
        </v-col>
        <v-col v-if="managable">
          <DisbandButton :villager="villager"></DisbandButton>
        </v-col>
      </v-row>
    </v-card>
  </v-container>
</template>

<script>
import DisbandButton from '@/components/village/DisbandButton'

export default {
  name: 'Villagers',
  components: { DisbandButton },
  props: [
    'villagers',
    'managable'
  ]
}
</script>

해체 버튼표시하다

<template>
  <v-btn @click="disbandVillager" color="red">Disband</v-btn>
</template>

<script>
export default {
  name: 'DisbandButton',
  props: ['villager'],
  methods: {
    disbandVillager: function () {
      this.$store.commit('disbandVillager', { id: this.villager.id })
    }
  }
}
</script>

그게 lodash라고 가정하면, 문제는 당신이 이 시스템을 사용하고 있다는 겁니다._.remove.

내부_.removeVue의 반응 시스템을 트리거하지 않는 방식으로 구현됩니다.구체적으로는 다음과 같습니다.

https://github.com/lodash/lodash/blob/ded9bc66583ed0b4e3b7dc906206d40757b4a90a/lodash.js#L3859

디폴트 어레이를 사용하고 있습니다.splice메서드. Vue에서 제공하는 사용자 지정 재정의가 아닙니다.

다음과 같은 것이 동작합니다.

village.villagers = village.villagers.filter(function (n) {
  return n.id !== villagerId
})

언급URL : https://stackoverflow.com/questions/63445948/changed-state-through-vuex-mutation-using-lodash-remove-does-not-trigger-a-react