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

希望它会有所帮助。

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

1 个答案: