5

私はまだ 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。

これが理にかなっていることを願っています！

4

1 に答える 1

3

ストアから削除するオブジェクト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>

最後に、コンポーネントにgettersandを登録することを忘れないでください。actions

vuex: {
   getters: {
      getSet
   },
   actions: {
      addSet, removeSet
   }
}
于 2016-08-16T00:30:21.713 に答える