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

currentPage将在离开页面后重置。为避免这种情况，您应该在新窗口/选项卡中打开记录页面，或将currentPage值保存在cookies或localStorage中。如果您喜欢后者，我建议您使用vuex-persistedstate

Answer 2

您应该在b分页组件上使用@change属性。如果将其绑定到返回项目的函数，则可以使用其中的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 3

您需要维护一个标志以使用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);
}

在vue中返回页面后，currentPage的状态正在更改

3 个答案: