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

Question

我仍在学习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按钮并使其正常工作。

我希望这是有道理的！

Answer 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
   }
}