我想在替换另一个即将到来的数据列表之前保留一个数据列表。我在我的 vuejs 项目中使用这个插件:https ://peachscript.github.io/vue-infinite-loading来加载更多数据。
设想:
- 通过调用加载更多处理函数重新加载以获取数据列表
- 在 Vuex 中做一个动作请求并存储在一个状态中
- 列出来自 Vuex 状态的数据
- 过滤另一个数据并列出
- 保留以前的数据列表,同时另一个即将替换的数据列表
在替换为即将到来的数据列表之前保留当前数据列表
目前,我通过将数据列表重置为 null 来加载更多处理函数来获取数据以获取新数据,这就是我的数据列表为空的原因。
computed: {
...mapGetters({
lists: ['user/list']
})
},
methods: {
onLoadMoreLists($state) {
this.$store.dispatch('user/list').then((data) => {
if (data.items.length > 1) {
this.pages.page++
$state.loaded()
} else {
$state.complete()
}
})
}
}
// table and infine
<the-table
:lists="lists"
>
<infinite-loading
:identifier="infiniteId"
spinner="spiral"
@infinite="onLoadMoreLists"
>
<div slot="spinner">
<st-loading></st-loading>
</div>
<div slot="no-more">No more data</div>
<div slot="no-results">No results message</div>
</infinite-loading>
</the-table>