组件道具会在一个Vuex状态发生变化时重新评估

Question

我有两个具有父子关系的组件。父组件可以使用v-for循环包含任意数量的子组件。

本质上，子组件包含一个引导表b-table，而父组件只是子组件的包装器。因此，父组件内部可以有任意数量的表

这些表具有选中或取消选中表中的行的功能。我想跟踪父组件内所有表的所有选定行。我使用Vuex存储来保留所有表中所有选定行的id。在检查/取消检查任何行之后，每个子组件都提交到vuex存储。到这里为止一切都很好。使用vue-devtools，我可以确认vuex存储中总是有正确的数据。(vuex状态属性名称为selectedObjects，它是一个字符串数组(。

现在，我想显示一些基于vuex存储值的父组件的数据(使用v-show(。我只想在存储中的selectedObjects不是空数组时显示数据。

我有一个getter来从存储中获取selectedObjects状态，并且我在父组件中使用这个getter作为使用mapGetters的计算属性。

问题是，每当子组件对vuex存储进行任何更改时，父组件都会刷新传递给子组件的prop。传递的prop根本不依赖于vuex存储。

<template>
<div>
<div v-if="isDataLoaded">
<div>
<div>
<div>
<span v-show="showBulkActions"> Action1 </span>
<span v-show="showBulkActions"> Action2 </span>
<span v-show="showBulkActions"> Action3 </span>
<span v-show="showBulkActions">Action4</span>
<span> Action5 </span>
</div>
</div>
</div>
<div>
<template v-for="objectId in objectIds">
<ObjectList
:key="objectId"
:objects="getObjectsFor(objectId)"
:payload="payload"
></ObjectList>
</template>
</div>
</div>    
</div>
</template>
<script>
export default {
props: {
payload: Object,
isDataLoaded: false
},
data() {
return {
objectIds: [],
objects: []
};
},
computed: {
...mapGetters(["getSelectedObjects"]),
showBulkActions() {
// return true; --> works fine
//This does not work as expected
const selectedObjects = this.getSelectedObjects;
return selectedObjects.length > 0;
}
},
mounted: async function() {
// init this.objects here
},
methods: {
...mapGetters(["getObjects"]),
getObjectsFor(objectId) {
//this line gets executed everytime the selectedObjects is modified in vuex store.
//this method is only being called from one place (prop of ObjectList component)
return this.objects.filter(f => f.objectId === objectId);
}
}
};
</script>

根据我的理解，当vuex存储中的selectedObjects数组发生更改时，不应该调用getObjectsFor方法，因为它不依赖于它。

为什么会发生这种情况？

Answer 1

您的父组件模板依赖于selectedObjectsVuex存储值(通过showBulkActions计算道具和getSelectedObjectsgetter作为计算道具(。

每次selectedObjects在存储中发生更改时，都会触发父组件的更新(和重新渲染(。

正如Vue文档中所述：

每次更新父组件时，子组件中的所有道具都将用最新值刷新

这意味着需要计算用于填充子组件道具的表达式(在您的案例中调用getObjectsFor方法(。这就是调用您的方法的原因。

解决方案是将所有对象作为道具传递给子组件，并在子组件内部作为计算道具进行过滤(在getObjectsFor方法中完成(。。。