从Vuex中的数组中删除特定项目答案

【问题标题】：Remove a specific item from array in Vuex从Vuex中的数组中删除特定项目
【发布时间】：2016-12-19 16:39:17
【问题描述】：

我仍在学习 vue.js 的过程中，并且正在进行一个小项目，以帮助我了解有关使用 Vuex 创建更大规模应用程序的更多信息。

我遇到了一个问题，我尝试使用应用程序中的按钮从数组中删除特定项目；我似乎无法在 Vuex 中获得正确的语法来执行此操作。这是我正在使用的：

商店

const state = {
    sets: [{}]
}

export const addSet = function ({ dispatch, state }) {
    dispatch('ADD_SET')
}

const mutations = {
    ADD_SET (state) {
        state.sets.push({})
    },
    REMOVE_SET (state, set) {
        state.sets.$remove(set)
    }
}

行动

export const removeSet = function({ dispatch }, set) {
    dispatch('REMOVE_SET')
}

吸气剂

export function getSet (state) {
    return state.sets
}

应用

<div v-for="set in sets"> 
    <span @click="removeSet">x</span>
    <Single></Single>
</div>

我设置了一个操作，当您单击add item 按钮时，将向数组添加一个空白项，该数组将在应用程序中放置一个新组件，只是不确定如何向每个组件添加remove item 按钮并完成这项工作。

我希望这是有道理的！

【问题讨论】：

标签： javascript arrays vue.js vue-component vuex

【解决方案1】：

您需要修改您的 removeSet 函数以调度要从存储中删除的 set 对象：

export const removeSet = function({ dispatch }, set) {
   dispatch('REMOVE_SET', set)
}

然后在您的组件中，您可以通过 @click 事件调用该操作，但您需要传递 set 对象：

<div v-for="set in sets"> 
   <span @click="removeSet(set)">x</span>
   <Single></Single>
</div>

最后，别忘了在你的组件中注册你的getters 和actions：

vuex: {
   getters: {
      getSet
   },
   actions: {
      addSet, removeSet
   }
}

【讨论】：