从我的 vuex 商店更新我呈现的模板中的数据

Question

我正在使用 vue、vuetify 和 vuex 做一个简单的 crud。但是我在更新已经在我的模板中呈现的数据时遇到问题，我的商店状态中的突变工作正常，因此这些更改应该在我的模板中更新，但是它们保持以前的状态，vuex 中的状态不是反应？如果有任何变化，他们不应该听取并改变它的价值吗？

这是我的模板，我在其中使用商店中的吸气剂，以便能够在我的 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>

这是我的组件的脚本（摘要）：

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'
      ])
    }
  }

这是我商店的摘要，正如我之前提到的，我执行的所有突变都起作用，并且状态根据所做的突变类型进行修改，但这并没有反映在我的模板中，有我没有正确处理 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)
  }
}

Answer 1

您正在使用 mapGetters，但我在您的代码中没有看到任何吸气剂。

在这里阅读吸气剂：https://vuex.vuejs.org/en/getters.html

在此处了解如何将状态映射到道具：https://vuex.vuejs.org/en/state.html

关于这一行的重要说明state.categories[index] = { ...state.categories[index], ...category }

了解 Vue 中数组和对象的反应性：https://vuejs.org/v2/guide/list.html#Caveats

希望对您有所帮助。

从我的 vuex 商店更新我呈现的模板中的数据

update data in my rendered template from my vuex store

vuex

vuejs2

vuetify.js