Question

我目前正在建立一个博客，我正在尝试实现“加载更多”按钮，但有点卡住了。这是我得到的：我在Vuex商店中有来自REST API的帖子列表：

actions: {
   LOAD_ARTICLE_LIST: function ({ commit }) {
      axios.get('someurl/articles').then((response) => {
      commit('SET_ARTICLE_LIST', { list: response.data.data })
       }, (err) => {
       console.log(err)
       })
   }
}
mutations: {
  SET_ARTICLE_LIST: (state, {list}) => {
    state.articles = list
   }
}

简化文章组成部分：

<div v-for="article in articles">
  <div> {{ article.title }}</div>
  <div> {{ article.description }}</div>
  <div> {{ article.date }}</div>
</div>
<div v-if="articles.length > 4" @click="loadMore">
  <div>More articles</div>
 </div>

 computed: {
   articles() {
      function compare(a, b) {   //sort articles by date
        if (a.date > b.date)
          return -1;
        if (a.date < b.date)
          return 1;
        return 0;
      }

    let articleList = this.$store.state.articles.sort(compare);
    articleList.splice(0,5);
    return articleList
  }
 }

 mounted: function () {
   this.$store.dispatch('LOAD_ARTICLE_LIST')
 }

我知道我必须使用调用loadMore（）的方法，而且我认为我必须在其中推送新文章，但不知道如何执行。如果有人可以帮我，那太酷了！

感谢您阅读

注意：如果我用这种方法推送任何文章，它们会按日期与所有列表一起排序还是仅与我推送的新文章一起排序？

Answer 1

查看您的代码片段，并基于我认为您正在尝试做的事情。试试这个：

    actions: {
      LOAD_ARTICLE_LIST: function ({ commit }) {
        axios.get('someurl/articles').then((response) => {
        commit('SET_ARTICLE_LIST', { list: response.data.data })
       }, (err) => {
       console.log(err)
       })
   }
}
mutations: {
  SET_ARTICLE_LIST: (state, {list}) => {
    function compare(a, b) {   //sort articles by date
      if (a.date > b.date)
        return -1;
      if (a.date < b.date)
        return 1;
      return 0;
     }
    state.articles = list.sort(compare);
   }
}

如果对数据进行排序真的很重要，那么我建议一旦从其余端点接收到数据后再这样做，就像我在上面所做的那样。

您的文章组件应如下所示：

<div v-for="article in articles">
  <div> {{ article.title }}</div>
  <div> {{ article.description }}</div>
  <div> {{ article.date }}</div>
</div>
<div v-if="articles.length > 5" @click="loadMore">
  <div>More articles</div>
 </div>

 computed: {
   articles() {
    let articleList = this.$store.state.articles;
    return articleList.splice(0, this.totalSize);
  }
 },

 data() {
    return {
      loadMoreSize: 5,
      totalSize: 0
    };
 },

 methods: {

   loadMore() {
     this.totalSize = this.loadMoreSize + this.articles.length;
   }

 },

 mounted: function () {
   this.loadMore();
   this.$store.dispatch('LOAD_ARTICLE_LIST')
 }

我还没有尝试过，但是我希望它会有所帮助：）

建立加载更多数据按钮

1 个答案: