[Vuejs]-Save results from one api in different arrays

As far as I can understand, you want a way to get the 20 elements from the current page, but you still want to fetch all the elements ?

There several ways to this, but the simplest (in my opinion) would be to have an array of all your pages, and an index to keep track of your current page.

For example, the structure may look like this :

// In your store
const state = () => {
  elementsPages: [
    [...], // elements from page 1
    [...], // elements from page 2
    [...]  // elements from page 3
  ],
  currentPage: 0
}

That way, you could have 2 differents computed, one to get only the 20 elements from your current page, and one to get all the elements

// in your component
export default {
  computed: {
    currentPageElements() {
      const allPages = this.$store.state.elementsPages
      const currentPage = this.$store.state.currentPage
      return allPages[currentPage]
    },
    allElements () {
      return this.$store.state.elementsPages.flat()
    }
  }
}

This works assuming that elementsPages is always an array, and currentPage is an Int between 0 and elementsPages.length. The code is just a simplified sample that you may need to adjust to fit your needs.

This is, in my opinion, a good way to manage your store state since you will not duplicate your data (meaning that you don’t have a property that contains the first 20 elements, AND another property that contains everything)

Also, note that the elementsPages property is an array of arrays. Instead of :

hits.forEach((hit) => { state.elements.push(hit) })

You may need to use something like this :

state.elementsPages.push(hits)

Hope that helps 😉