Binding data from vuex state to vuetable

[jan144]

Binding data from vuex state to vuetable (instead of providing the table instance an api-url) would be very useful if one would want to make API requests in Vuex, store the results in the Vuex state and get the data from there. That would, in some cases, seem like good practice instead of directly communicating with the API through the Vuetable.

Has anyone implemented this yet?

[ratiw]

Currently, I see using Vuex to handle state management as a recommended way in a large web app that uses Vue.js. Not using it is by no mean an indication for bad practice at all.

However, I would love to see how people would integrate vuex with Vuetable to solve their problems that might also benefit the others as well.

[cristijora]

From my point of view, I don't see so many advantages using vuex to store paginated tabular data. If you want to keep paginated data in vuex it might become hard to manage it, as well as manage edited/added fields if you have many pages. For the apps I used, the current solution of vue-table seemed to be more than enough. The only disadvantage was more on the required pagination fields as I had to implement them on the backend side and adapt my backend pagination to vue table. This, to me, is a bigger issue than handling results in vuex state

[ratiw]

@cristijora Can you please explain some more about the required pagination fields that you had to implemented? I'm not quite understand what you mean. Maybe you can open a new issue for that so that we can discuss.

[rottmann]

Usecase: I use vuex in a large app that store real estate data, each row has hundreds of fields that should be filterable.

The webapp must be offline usable (without installing local databases), because sometimes the real estate agents are in areas where they did not have a good internet connection.

On demand the rows are loaded and stored in vuex and the local storage. At the next application start only modified rows are reloaded, or if an other user modify a row, each connected client updates their vuex state in "realtime".

I load the data for vuetable from the vuex store. The store filter/sort/etc. and deliver the needed data to vuetable. If vuex did not have the requested data, it loads them over the API.

One questions is: why did vuetable not watch the data change? I do this manually with adding a watcher that calls setData.

<template>
  <div class="re-list">
    <vuetable
      :api-mode="false"
      :data="elements"
      ref="vuetable"
      :fields="fields"
      :per-page="1"
      :muti-sort="true"
      multi-sort-key="shift"
    ></vuetable>
  </div>
</template>

<script>
import Vuetable from 'vuetable-2/src/components/Vuetable'

import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'ReList',

  components: {
    Vuetable
  },

  data () {
    return {
      fields: [
        {
          name: 'name',
          sortField: 'name'
        }, //...
      ]
    }
  },

  created() {
    this.fetch({
      page: 1, // static values for a shorter example
      perPage: 10,
      filter: {},
      sort: {}
    })
  },

  computed: {
    ...mapGetters('plugins/re/list/', {
      elements: 'get' // better with 'getFiltered'
    })
  },

  methods: {
    ...mapActions('plugins/re/list/', {
      fetch: 'fetch'
    }),
    //...
  },

  watch: {
    elements: function(data) {
      this.$refs.vuetable.setData(data)
    }
  }
</script>

[ratiw]

@rottmann What I'm currently working on is that, in data mode, Vuetable will call you callback function asking for the data instead of calling the API endpoint. So, you can implement whatever logic necessary and then return those chunk of data from your callback to Vuetable. It will then use those data to call setData() method. Hope to have time to finish it soon.

[rubemlrm]

@ratiw can we use feature or is still on development ?

[AngeloAnolin]

Just wondering if this is a bug when you bind data through vuex with VueTable, where when perform a sort on a column, console log displays "data mode: array".

That code is in VueTable.vue component line 1156.

I think there are cases where setting the data explicitly, rather than through apiUrl is better. Although doing so right now seems cumbersome.

Also, I see the same console log message when applying search filter functionality.

[ratiw]

@AngeloAnolin It's just a console.log dump that I forget to remove, sorry about that.

I actually feel the same that using the Data mode is quite cumbersome. As I don't really use it myself, any suggestion on how to improve it will be very appreciated. I primarily use API mode without Vuex, so I don't quite understand how the workflow is.