vue-table-2 с Vuex - не удалось изменить свойство count - PullRequest
Новая
       8

vue-table-2 с Vuex - не удалось изменить свойство count

0 голосов
/ 17 ноября 2018

Я использую компонент vue-table-2: https://github.com/matfish2/vue-tables-2, и я изо всех сил стараюсь заставить его работать так, как я хочу.

У меня есть API (использующий платформу API), который уже выполняет все нумерацию страниц.Поэтому, когда я впервые получаю свой список компаний, он дает первые десять результатов + общее количество строк.Я храню все это в своем хранилище vuex, и я могу отобразить список в своей таблице (при использовании useVuex false или true, поэтому я не совсем понимаю, как работает этот параметр).Проблема в том, что я не могу разбить на страницы, потому что я получил только десять результатов и не могу изменить общее количество строк, поэтому я не получаю элемент разбиения на страницы внизу и не могу привязать что-либо к нему для получения других страниц позже.

Поскольку я довольно новичок в VueJ, я не могу понять, как это должно работать с моим API.Вот мой код:

Мой элемент DataTable: 

<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",
}

Заранее спасибо за вашу помощь!

...