title: Vuetify Using datatable with external data from an API with Vuex
body: <p>I want to use the vuetify framework with Vuex , but there is limited documentation about using it with Vuex.</p>
  
  <p>I want to:</p>
  
  <ul>
  <li>Get data from an external API ( but only the data needed ) </li>
  <li>Then Save the data in state and edit or whatever</li>
  <li>Then push any changes back to the api</li>
  </ul>
  
  <p>I have tried some of the external pagination and sorting examples with vuetify , but I can't get it to show all record count unless I hard code it. </p>
  
  <p>I am quite new to Vue and Vuetify , so maybe I am misunderstanding something.</p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
      &lt;v-data-table
              :headers='headers'
              :items='items'
              :length='pages'
              :search='search'
              :pagination.sync='pagination'
              :total-items='totalItemCount'
              class='elevation-1'
      &gt;
          &lt;template slot='items' slot-scope='props'&gt;
              &lt;td class='text-xs-right'&gt;{{ props.item.id }}&lt;/td&gt;
              &lt;td class='text-xs-right'&gt;{{ props.item.first_name }}&lt;/td&gt;
              &lt;td class='text-xs-right'&gt;{{ props.item.last_name }}&lt;/td&gt;
              &lt;td class='text-xs-right'&gt;{{ props.item.avatar }}&lt;/td&gt;
          &lt;/template&gt;
      &lt;/v-data-table&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import moment from 'moment'
  import axios from 'axios'
  
  export default {
    name: 'test-table',
    watch: {
      pagination: {
        async handler () {
          const rowsPerPage = this.pagination.rowsPerPage
          // const skip = (this.pagination.page - 1) * rowsPerPage
          const pageNumber = this.pagination.page
          const res = await axios.get(`https://reqres.in/api/users?page=${pageNumber}&amp;per_page=${rowsPerPage}`)
          this.items = res.data.data
          this.$store.commit('saveTableData', this.items)
        },
        deep: true
      }
    },
    computed: {
      pages () {
        return 171
      },
      totalItemCount () {
        return 400
      }
    },
    async mounted () {
      const rowsPerPage = this.pagination.rowsPerPage
      const skip = (this.pagination.page - 1) * rowsPerPage
      const res = await axios.get(`https://reqres.in/api/users?page=${skip}&amp;per_page=${rowsPerPage}`)
      this.items = res.data.data
      this.$store.commit('saveTableData', this.items)
    },
    methods: {
      nzDate: function (dt) {
        return moment(dt).format('DD/MM/YYYY')
      }
    },
    data: () =&gt; ({
      search: '',
      // totalItems: 0,
      items: [],
      pagination: {
        sortBy: 'Date'
      },
      headers: [
        { text: 'ID', value: 'id' },
        { text: 'First Name', value: 'first_name' },
        { text: 'Last Name', value: 'last_name' },
        { text: 'Avatar', value: 'avatar' }
      ]
    })
  }
  </code></pre>
  
  <p></p>