state of currentPage is changing after coming back to page in vue - vue.js

Question

I am struggling to maintain the state of current page in vuex. I am tring to store the state of pagination when I click on any record and the on click of back button I should get the same page.
Below is the code snippest :
table.html
<b-table show-empty
outlined
hover
stacked="md"
:sort-by.sync="sortBy"
:items="companies"
:fields="[
{key: 'name', label: this.$t('shared.name'), sortable: true},
{key: 'companyId', label: this.$t('shared.orgNumber'), sortable: true},
{key: 'properties.state', label: this.$t('shared.status'), sortable: true},
{key: 'serviceProviderName', label: this.$t('shared.serProvider'), sortable: true}
]"
:current-page="currentPage"
:per-page="perPage"
:filter="filter"
v-bind:empty-text='$t("shared.emptyText")'
v-bind:empty-filtered-text='$t("shared.emptyFilteredText")'
#filtered="onFiltered"
#row-clicked="showCompany"
tbody-tr-class="row-cursor">
</b-table>
<b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage"
class="float-right"/>
in js file I have added computed like this :
computed: {
currentPage:{
get () {
return this.$store.getters.currentPage;
},
set (value) {
this.$store.commit('SET_CURRENT_PAGE', value);
}
},
},
Now the problem is when I am click on page number 2 and then click on any record and on click of record, new page is opening and then when I come back from that page I am not getting page number as 2. It is changing again to 1. In developer tool I can see it is storing the state but it is chaning when I come back to the page
I dont know why the state of currentPage is changing. Please help!

Answer 1

currentPage will reset after you leave the page.
To prevent such a behavior you should open record page in new window/tab or save the currentPage value in cookies or localStorage.
If you prefer the latter I would advice you to use vuex-persistedstate

Answer 2

You should use #change attribute on your b-pagination component. If you bind it to a function returning items, it can use currentPage inside it to fetch the data for current page.
<b-pagination #change="fetchItems" ....>
Inside your component you could have a method
methods: {
fetchItems () {
// Use this.$store.getters.currentPage inside this function
// to fetch paginated data
return items;
}
}
You could also have a mount method to fetch paginated data using currentPage, this way you could fetch the data when you come back on page.
mounted () {
fetchItems()
}

Answer 3

The issue is when you leave the component it goes back to the ether. When you come back to that component, the page is built again. You should use the lifecycle hook created() to retrieve the saveed page from the store. That way the currentPage variable will have the page set prior to rendering all of the elements. It's probably better to use regular variable currentPage since there isn't a need for it to be a computed function.

Answer 4

You need to maintain a flag to achieve this using store/vuex.
Take a look at the code below. I hope this is something you were looking for
<b-table show-empty
outlined
hover
stacked="md"
:sort-by.sync="sortBy"
:items="companies"
:fields="[
{key: 'name', label: this.$t('shared.name'), sortable: true},
{key: 'companyId', label: this.$t('shared.orgNumber'), sortable: true},
{key: 'properties.state', label: this.$t('shared.status'), sortable: true}
]"
:current-page="currentPage"
:per-page="perPage"
:filter="filter"
v-bind:empty-text='$t("shared.emptyText")'
v-bind:empty-filtered-text='$t("shared.emptyFilteredText")'
#filtered="onFiltered"
#row-clicked="showCompany"
tbody-tr-class="row-cursor">
</b-table>
<b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage"
class="float-right"/>
data() {
return {
vuexStateApplied: false
}
}
methods: {
onFiltered(filteredItems) {
if (!this.vuexStateApplied && !this._.isEmpty(this.$store.getters.currentPage)) {
this.currentPage = this.$store.getters.currentPage
// By setting this flag we are ensuring not to
// apply same currentPage value again on
// filtering the table data
this.vuexStateApplied = true
}
}
}
beforeRouteLeave() {
// update with new value
this.$store.commit('SET_CURRENT_PAGE', value);
}
OR
destoryed() {
// update with new value
this.$store.commit('SET_CURRENT_PAGE', value);
}