使用 Lodash.remove 通過 Vuex 突變更改 state 不會觸發我的 Vue 組件中的反應性重新渲染

Question

我有一個組件，它從父組件接收一組Villager到它的prop中。 父組件從this.$store.state中提取該數組。

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

之后我執行this.$store.mutation提交來更改給定的數組。 正如您在下面的屏幕截圖中看到的那樣，突變確實有效。 但是，我所在的組件沒有重新渲染，並且仍然顯示 3 而不是 2 項。

反應鏈似乎在某處被打破，但我無法確定惡魔。 我認為props值是一種反應機制。 正如您在屏幕截圖中看到的，它的值已更改，但 DOM 並未相應更新。

代碼摘錄

我試圖提取問題的相關部分

存儲/索引.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)
         }
       }
     },
[...]

村庄.vue

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

村民.vue

<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>

DisbandButton.vue

<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>

Answer 1

假設那是 lodash 那么我相信問題在於您正在使用_.remove 。

在內部_.remove的實現方式不會觸發 Vue 的反應系統。 具體在這里：

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

那是使用默認的 Array splice方法，而不是 Vue 提供的自定義覆蓋。

像這樣的東西應該工作：

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