Vue.js表更新组件数据，而不在所选过滤器上重新渲染整个组件

Question

我有一个单页的仪表板应用程序。我一直在玩setInterval，它非常适合在不重新加载页面的情况下更新数据。我把setInterval函数放在mounted()中，不确定它是否最好属于那里，但工作正常。

然而！这个SPA有很多过滤器。你可以搜索，你可以选择下拉列表，你可以排序，打开和打开。假设初始页面加载有1000行，你可以使用搜索栏将其缩小到一行/一个结果。现在运行setInterval，它将重新渲染所有1000行。这是方法(在最初加载数据的methods: {}部分中定义，以及在mounted()和setInterval中使用的方法(：

getData: function (arg1, arg2) {
API.getSomeData(arg1, arg2).then(resp => {
getTicketData(resp.data);
this.$data.loading = false;
});
}

当涉及到setInterval部分时，有没有一种方法可以解释过滤器？

任何见解都值得赞赏。

Answer 1

当您从API获取数据并对其进行筛选时，听起来可能会覆盖相同的数据属性。如果是这种情况，则应使用计算属性向用户显示筛选后的记录。

computed: {
tableRows() {
if (this.filters)
return this.filter()
return this.apiData
}

其中this.filter()将过滤掉this.apiData而不覆盖其内容。然后，您可以在模板中的tableRows(例如v-for="row in tableRows"(上进行迭代，以向用户显示这些内容。

如果您想从Vue组件中删除一些逻辑，您可以考虑使用Vuex存储来从API中获取/更新，并计算过滤器。

this.$store.dispatch('fetch_on_interval', { interval: 1000 })
this.$store.dispatch('set_filters', { ...filters })
this.$store.getters('table_data')

您的getter将检查过滤器并返回任何相关的内容。Vuex getter也可以用于计算属性。