vue.js - 如何防止Bootstrap-Vue分页自动重置

Question

我有多个 View ，我想保存每个 View 的状态，这样用户就不必再做同样的事情。

在其中一个上，我有一个表，我使用 bootstrap-pagination 组件进行分页，因此当用户更改页面时，我将请求发送到服务器以获取新数据。我在 Vuex 中存储排序和过滤参数，它运行良好。

但是当我想像那样保存当前页面时，每次我更改 View 并返回时，bootstrap-pagination 都会将其更改为 1。是否有可能阻止这种行为？

这是 HTML 代码:

<b-pagination v-if="currentPage!=-1"
            v-model="currentPage"
            :total-rows="totalRows"
            :per-page="perPage"
            aria-controls="my-table"
            pils
            align="center"
            class="ml-auto mr-auto"
          ></b-pagination>

和 javascript 中的代码:

  data: function () {
      return {
        ...
        currentPage: this.$store.state.currentPage,
        ...
      }
    },

    ...

    watch: {
        currentPage: function(){
                this.$store.commit('updateCurrentPage', this.currentPage);
                this.getData();
              },
    }

Answer 1

您面临的问题很可能与数据加载和设置的顺序有关。

当你的组件被初始化时，你立即设置 currentPage 页面属性，而(我猜)在稍后的某个时间设置 totalRows 属性，在获取你的来自您数据库的数据。

这会导致问题，因为分页会认为有 0 行。因此，当您将其设置为第 5 页时。它会检查 perPage 和 totalRows 属性，并且由于(还)没有第 5 页，它会自动设置 currentPage 回到第 1 页。

相反，我建议您在检索数据并设置 totalRows 属性后，将 currentPage 设置为商店中的值。这应该可以解决您遇到的问题。