Having trouble updating my table component when the data in my store changes. I have a simple table using v-for as shown below:
<tr v-for="d in getDatas" v-bind:key="d.id">
and buttons to navigate between pages:
<button class="fa fa-chevron-left" @click="previousPage"/>
<button class="fa fa-chevron-right" @click="nextPage"/>
I load data into my datas before opening the component with the table, and retrieve this data from the store like so:
computed: {
getDatas () {
return this.$store.getters.getDatas;
}
},
but how can I update my store with new data when clicking on the nextPage or previousPage button?
Below are my methods:
methods: {
...mapActions(["fetchDatas"]), //this is my action
nextPage() {
this.currentPage += 1;
},
previousPage() {
if(this.currentPage != 1) {
this.currentPage -= 1;
}
},
and my action:
async fetchDatas({ commit },{ currentPage}) {
const data = await fetch(`someURL&perPage=${currentPage}`);
const response = await data.json();
commit('setData', response);
}
So, how do I reload the component and my store when clicking on next/previousPage?