0

我正在努力维护 vuex 中当前页面的状态。当我单击任何记录并且单击后退按钮时，我正在尝试存储分页状态，我应该得到相同的页面。

以下是代码片段：

表.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 的状态正在改变。请帮忙！

4

4 回答 4

0

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

于 2018-08-28T14:43:56.903 回答
0

问题是当您离开组件时，它会回到以太。当您返回该组件时，页面将再次构建。您应该使用生命周期钩子 created() 从商店中检索保存的页面。这样，currentPage 变量将在渲染所有元素之前设置页面。使用常规变量 currentPage 可能会更好，因为它不需要是计算函数。

于 2022-02-03T20:48:53.167 回答
0

您应该在 b-pagination 组件上使用 @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()
}
于 2018-08-28T14:47:34.573 回答
-1

您需要使用 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);
}
于 2018-11-28T18:12:39.593 回答