使用 Lodash.remove 通过 Vuex 突变更改状态不会触发我的 Vue 组件中的反应式重新渲染
Changed state through Vuex mutation using Lodash.remove does not trigger a reactive re-render in my Vue component
我有一个组件从父组件接收一个 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>
假设那是 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
})
我有一个组件从父组件接收一个 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>
假设那是 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
})