состояние currentPage меняется после возвращения на страницу в vue

Question

Я пытаюсь сохранить состояние текущей страницы в vuex. Я пытаюсь сохранить состояние нумерации страниц, когда нажимаю на любую запись, и при нажатии кнопки «Назад» я получаю ту же страницу.

Ниже приведен фрагмент кода:

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"/>

в js-файле, который я добавил, вычислили так:

computed: {

 currentPage:{
   get () {
     return this.$store.getters.currentPage;
   },
   set (value) {
     this.$store.commit('SET_CURRENT_PAGE', value);
   }
 },
},

Теперь проблема в том, что когда я нажимаю на страницу № 2, а затем нажимаю на любую запись и при щелчке записи открывается новая страница, а затем, когда я возвращаюсь с этой страницы, я не получаю номер страницы как 2. Это снова меняется на 1. В средстве разработчика я вижу, что оно сохраняет состояние, но оно меняется, когда я возвращаюсь на страницу

Я не знаю, почему состояние currentPage меняется. Пожалуйста, помогите!

Answer 1

Вы должны использовать атрибут @change в компоненте b-pagination. Если вы связываете его с функцией, возвращающей элементы, она может использовать внутри нее currentPage для извлечения данных для текущей страницы.

<b-pagination @change="fetchItems" ....>

Внутри вашего компонента вы можете иметь метод

methods: {
   fetchItems () {
      // Use this.$store.getters.currentPage inside this function 
      // to fetch paginated data
      return items;
   }
}

У вас также может быть метод mount для выборки разбитых на страницы данных с использованием currentPage, таким образом вы можете получить данные, когда вернетесь на страницу.

mounted () {
   fetchItems()
}

Answer 2

Вы должны поддерживать флаг, чтобы достичь этого, используя store / vuex. Посмотрите на код ниже. Я надеюсь, что это то, что вы искали

<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);
}

Answer 3

currentPage будет сброшен после того, как вы покинете страницу. Чтобы предотвратить такое поведение, вы должны открыть страницу записи в новом окне / вкладке или сохранить значение currentPage в cookies или localStorage. Если вы предпочитаете последнее, я бы посоветовал вам использовать vuex-persistedstate