使用Lodash.remove通过Vuex突变更改状态不会删除我的Vue组件中的反应式重新渲染

问题描述

我有一个组件，它从父组件的Villager接收prop的数组。父组件从this.$store.state中提取该数组。

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

我执行this.$store.mutation提交，然后更改给定的数组。如屏幕截图所示，该突变确实有效。但是，我所在的组件没有重新渲染，仍然显示3而不是2。

反应链似乎在某个地方坏了，但我无法查明这个魔鬼。我认为props值是一种反应机制。正如您在屏幕截图中所看到的，它的值已更改，但DOM没有相应更新。

代码摘录

我试图提取问题的相关部分

store / 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)
         }
       }
     },[...]

Village.vue

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

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）