How to use Vuex to set items in Vuetify data table?

Question

i am making an API request to return an array of objects and it looks something like this:

enter code here
  returnedMyArray [
        {
         name: 'David', 
         age: '25', 
         hobby: 'Music'
         },
         {
         name: 'Mary', 
         age: '28', 
         hobby: 'Cooking'
         }]

I want to capture this state in Vuex store and use getters and setters to display the data in my Data-Table component but not sure how would i go about it.

My Data table component looks like this.

enter code here
 <template>
<v-data-table :headers="headers" :items="tableItems">
  <template v-slot:items="props">
     <td>{{props.tableItems.name}} </td>
      <td>{{props.tableItems.age}} </td>
   </template>
</v-data-table>
 </template>

 <script>
   import { mapGetters } from 'vuex'
   export default{
       data() {
         return {
           headers: [
           { text: 'Person', sortable: false },
           { text: 'Age group', sortable: false },
           { text: 'Activity', sortable: false },
               ]
          }
         }
       },
      computed: {
         ...mapGetters({ 
       tableItems: 'tableItems'
       })
          }
 </script>

And My store looks like this:-

     state: {
     items: []
    },
    getters: {
      tableItems: state => state.items
    }

I am not quite sure if i am taking the right approach or if i need to set up a mutation, any help will be appreciated. Thank you in advance.

@Boussadjra Brahim Any ideas?

Somethingwhatever
– Somethingwhatever

2019-11-05 15:54:49 +00:00
Commented Nov 5, 2019 at 15:54 — Somethingwhatever
– Somethingwhatever, Commented Nov 5, 2019 at 15:54

Mishel Tanvir Habib · Accepted Answer · 2019-11-05 17:53:46Z

1

Of course you need to create mutations. The only way to actually change state in a Vuex store is by committing a mutation. So set your mutations like this:

const mutations = {
    setItems: (state, payload) => {
        state.items = payload;
    }
}

More about mutations

Not sure from where you are calling your API. But Actions are a good place to call your APIs. Note You can not call your API inside Mutations, since Mutations are synchronous. But Actions are asynchronous, so you can call your APIs from them.

const actions = {
    setItems: (context, payload) => {
        //if any payload is passed to this action, 
        //it will commit the payload to the "setItems" mutations
        if (payload) {
            context.commit("setItems", payload);
            return;
        }
        //if no payload is passed, it will call the API
        else {
            //here I'm using "Vue Resource", you can use
            //any package like "axios" etc.
            Vue.$http.get(`https://example.com/getItems`).then(
                (response) => {
                    context.commit("setItems", response.body);
                },
                (error) => {
                    console.log(error);
                }
            );
        }
    }
}

Another thing is, if you want to use the state without any manipulations, instead of mapGetters, use directly mapState. mapGetters are handy when you need the manipulated data (but the state will be unchanged). Like, a simple case, you need the state_value multiplied by 3, or something like that.

edited Nov 5, 2019 at 17:53

answered Nov 5, 2019 at 17:42

Mishel Tanvir Habib

1,15211 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Somethingwhatever Over a year ago

Thanks for the reply, Sorry and yeah i should have added the code for the API request but i set it up as you suggested and i am getting an empty array in the table items.

Collectives™ on Stack Overflow

How to use Vuex to set items in Vuetify data table?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related