[Vuejs]-VUE and Pagination : pag.component loose values after pager is changed/clicked

The problem is definitely in the getOrders action. without seeing it, I cannot pinpoint what it is, but based on the screenshot I feel like I can take a good guess. I’m assuming you’re using an async call to an api every time you hit next page, if not, it’s a whole lot easier.

getOrders returns a promise. that is most likely because it is an asynchronous function using axios/fetch or some other lib to do remote call. The way vuex works is that the actions are asynchronous and mutations are synchronous. If you call

this.orderList = this.getOrders(queryParams)

you are are assigning the asynch function as the value, which is guaranteed to return a promise.

what you need to do is split the functionality into a getter and an actions

you call the action to get new data from remote server (assuming that’s what you’re using)
as part of the callback/promise response, you mutate the data into the store

you also make a getter (orderList) available that you can access from your component, and use that instead of defining orderList in the component

when a user hits prev/next or any page, you…

• call action – updateList(queryParams)
  • clear the orderList in the store (store.orders = []) as part of the action
  • make an api call
  • on success, update data
• update view to display a loading data animation
• once the data is updated, reactivity will kick in and the orderList will repopulate
  • using a watch or a orderList > 0, remove the loading animation