Vuex 어레이에서 특정 항목 제거

Vuex 어레이에서 특정 항목 제거

저는 아직 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각 컴포넌트에 단추를 채우고 작업을 수행합니다.

이게 말이 됐으면 좋겠어!

수정이 필요합니다.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
   }
}

언급URL : https://stackoverflow.com/questions/38921794/remove-a-specific-item-from-array-in-vuex