带有 Vuex 的 vue-table-2 - 无法更改计数属性答案

【问题标题】：vue-table-2 with Vuex - not able to change the count property带有 Vuex 的 vue-table-2 - 无法更改计数属性
【发布时间】：2019-04-20 10:23:54
【问题描述】：

我正在使用 vue-table-2 组件：https://github.com/matfish2/vue-tables-2，我正在努力让它按我的意愿工作。

我有一个 API（使用 API 平台），它已经使所有分页工作正常进行。因此，当我第一次获取我的公司列表时，它会给出前十个结果 + 总行数。我将所有这些都存储在我的 vuex 商店中，并且能够在我的表中显示列表（useVuex 为 false 或 true，所以我不太了解这个参数是如何工作的）。问题是我无法分页，因为我只有十个结果并且无法更改总行数，所以我没有得到底部的分页元素，也无法将某些内容绑定到它以稍后获取其他页面。

由于我对 VueJs 还很陌生，所以我无法弄清楚这应该如何与我的 API 一起使用。到目前为止，这是我的代码：

我的数据表元素：

<v-client-table name="company" :columns="columns" :data="companies" :options="options" :theme="theme" id="dataTable">
          <b-button slot="actions" slot-scope="props" variant="secondary" size="sm" class="btn-pill">Edit</b-button>
</v-client-table>

还有我的脚本：

<script>
import Vue from 'vue'
import { ClientTable, Event } from 'vue-tables-2'
import { mapGetters } from 'vuex'

Vue.use(ClientTable)

export default {
  name: 'DataTable',
  components: {
    ClientTable,
    Event,
  },
  data: function() {
    return {
      columns: ['name', 'actions'],
      options: {
        headings: {
          name: 'Name',
          actions: 'Actions',
        },
        sortable: ['name'],
        filterable: ['name'],
        sortIcon: {
          base: 'fa',
          up: 'fa-sort-asc',
          down: 'fa-sort-desc',
          is: 'fa-sort',
        },
        pagination: {
          chunk: 5,
          edge: false,
          nav: 'scroll',
        },
      },
      useVuex: true,
      theme: 'bootstrap4',
      template: 'default',
    }
  },
  computed: {
    ...mapGetters({
      companies: 'companyModule/companies',
      totalCompanies: 'companyModule/totalCompanies',
    }),
  },
}
</script>

这是在我的组件中加载数据，我在其中指定我希望我的 api 发送给我的每页有多少项目以及我想要的页面：

created() {
    this.$store.dispatch('companyModule/FETCH_COMPANIES', {
      page: 1,
      nbItemPerPage: 10,
    })
  },

我的商店是这样的：

import ApiService from '@/services/APIService'

export const companyModule = {
  strict: true,
  namespaced: true,
  state: {
    companies: [],
    totalCompanies: 0,
  },
  getters: {
    companies: state => state.companies,
    totalCompanies: state => state.totalCompanies,
  },
  mutations: {
    SET_COMPANIES(state, data) {
      state.companies = data.companies
      state.totalCompanies = data.totalCompanies
    },
  },
  actions: {
    FETCH_COMPANIES(context, payload) {
      payload.entity = 'companies'
      return ApiService.get(payload).then(data => {
        context.commit('SET_COMPANIES', data)
      })
    },
  },
}

收到数据后，我将所有内容存储在公司状态中，现在我存储从 API 获取的所有内容，如下所示：

{
      "@id": "/api/admin/companies/1",
      "@type": "Company",
      "id": 1,
      "name": "Test Company",
}

提前感谢您的帮助！

【问题讨论】：

如何从 api 获取该数据，请显示执行该操作的代码
在创建我的列表视图时：
在创建我的列表视图时，我有： created() { this.$store.dispatch('companyModule/FETCH_COMPANIES', { page: 1, nbItemPerPage: 10, }) }, 此操作获取API 每页给我 10 个结果，并在第 1 页给我 10 个结果。然后我将所有结果存储在我的商店中，这是存储的一项的格式：{“@id”：“/api/admin/companies/ 1", "@type": "Company", "id": 1, "name": "Test Company" } 希望对您有所帮助！
您能否通过添加这些详细信息来编辑问题以更清晰
如果我直接提供所有数据，我会得到我想要的分页，但我只想获取一定数量的项目，因为当数据库有大量数据时，这更具可扩展性。这就是为什么我希望表格知道我将有 100 个结果（这将在底部显示分页元素）并在 changePage 事件中获取特定页面的数据。（我希望我很抱歉，如果我不是：s）

标签： vue.js vuejs2 vue-component vuex

【解决方案1】：

watch: {
    'companies': {
    handler (newValue, oldValue) {
        this.totalRows=this.companies.length;
    },
    deep: true
    }
},

Vue “watch” 是 vue 框架的一个强大的响应式选项属性，它可以帮助前端开发人员监听对值所做的更改，然后对其做出反应。因此，一旦设置了 totalRows，您可以将其分配给表格属性，表格将相应更改。对于我的情况，我将它用于引导表，如下所示：

    <b-pagination
        :total-rows="totalRows"
        :per-page="perPage"
></b-pagination>

【讨论】：