Создайте кнопку загрузки дополнительных данных

Question

Я сейчас создаю блог и пытаюсь реализовать кнопку «Загрузить больше», но я немного застрял. Вот что я получил: У меня есть список сообщений из REST API, которые я вызываю в моем магазине Vuex:

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')
 }

Я не пробовал это, но надеюсь, это поможет:)