从我的 vuex 商店更新我的渲染模板中的数据

Question

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

这是我的模板，我使用商店中的 getter 来迭代我的表：

<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，但我在您的代码中看不到任何吸气剂。

在此处阅读有关 getter 的信息：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

希望它会有所帮助。