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