vue.js - 在替换为即将到来的数据 Vuejs 和 vue-infinite-loading 列表之前保留当前数据列表

Question

我想在替换另一个即将到来的数据列表之前保留一个数据列表。我在我的 vuejs 项目中使用这个插件:https://peachscript.github.io/vue-infinite-loading加载更多数据。

场景:

1. 通过调用加载更多处理函数重新加载以获取数据列表
   • 在 Vuex 中执行一个 Action 请求并存储在一个状态中
   • 列出来自 Vuex 状态的数据
2. 过滤另一个数据并列出
   • 保留以前的数据列表，而另一个即将替换

Keep current list of data before replace by up coming list of data

Currently, I get data from loading more handler function by reset data list to null to get new data that's why My list of data is blank.

    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>

Answer 1

我用它来解决问题:

this.$refs.infiniteloading.stateChanger

ref="无限加载"