update data in my rendered template from my vuex store

Question

I'm doing a simple crud using vue, vuetify and vuex. but I am having a problem when updating my data that are already rendered in my template, the mutations in my store state work correctly, therefore these changes should be updated in my template, however they keep their previous state, the states in vuex are not reactive? Should not they listen if there is any change and change its value?

this is my template where I use a getters from my store to be able to iterate in my table:

<v-data-table
 :headers="headers"
 :items="categories"
 :search="search"
>
 <template slot="items" slot-scope="props">
   <td>{{ props.item.name }}</td>
   <td>{{ props.item.description }}</td>
   <td>
     <v-btn icon class="mx-0" @click="editItem(props.item)">
       <v-icon color="teal">edit</v-icon>
     </v-btn>
     <v-btn icon class="mx-0" @click="deleteItem(props.item)">
       <v-icon color="pink">delete</v-icon>
     </v-btn>
   </td>
 </template>
 </v-data-table>

this is the script of my component (a summary):

import { mapGetters } from 'vuex'

  export default {
    name: 'category',
    data: () => ({
      dialog: false,
      search: '',
      headers: [
        { text: 'Name', value: 'name' },
        { text: 'Description', value: 'description' },
        { text: 'Actions', value: 'name', sortable: false }
      ]
    }),
    computed: {
      ...mapGetters([
        'categories'
      ])
    }
  }

and this a summary of my store, as I mentioned before all the mutations that I perform work and the state is modified according to the type of mutation that is made, but this is not reflected in my template, there is something that I am not handling correctly of vuex ?

const state = {
  categories: []
}

const mutations = {
  GET_CATEGORIES(state, categories) {
    state.categories = categories.reverse()
  },

  ADD_CATEGORY(state, category) {
    state.categories.unshift(category)
  },

  UPDATE_CATEGORY(state, category) {
    const index = state.categories.findIndex(x => x.id == category.id)
    state.categories[index] = { ...state.categories[index], ...category }
  },

  DELETE_CATEGORY(state, category) {
    state.categories.splice(category, 1)
  }
}

Alendorff Alendorff · Accepted Answer · 2018-04-26T20:59:58

You are using mapGetters but I don't see any getters at your code.

Read about getters here: https://vuex.vuejs.org/en/getters.html

Read about how to map state to props here: https://vuex.vuejs.org/en/state.html

And one important note about this line state.categories[index] = { ...state.categories[index], ...category }

Read about reactivity for arrays and objects in Vue: https://vuejs.org/v2/guide/list.html#Caveats

Hope it will help.

update data in my rendered template from my vuex store

1 Answers