[Vuejs]-How to re-render component after update data in store

by

2👍

✅

You already have a computed property that automatically updates when your store updates. All you have to do is trigger the action in your methods for changing pages.

nextPage() {
   this.currentPage += 1;
   this.fetchDatas(this.currentPage);
},
previousPage() {
   if(this.currentPage != 1) {
      this.currentPage -= 1;
      this.fetchDatas(this.currentPage);
   }
},

And unless you have a compelling reason for requiring an Object parameter to the action, I would remove the curly braces entirely:

async fetchDatas({ commit }, currentPage) {
...

Otherwise you need to call it with this.fetchData({currentPage: this.currentPage}).

👤Erich

1👍

You can setup a watch on the currentPagevariable where the getDatas action would be fired again on the change of the current page after clicking the buttons.

A watch can be declared as so:

watch: {
        currentPage: function (newValue) {
            this.$store.dispatch('fetchDatas', this.currentPage)
        },
}
👤Yash Singhal

Leave a comment