从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在COMPON ent：

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