Vuex 只删除第一个元素
Vuex is only removing the first element
我有以下设置,尝试使用 DELETE_NOTE
突变从 notes
数组中删除 activeNote
。但它只删除数组的第一个元素。
mutations.js 是:
export const mutations = {
DELETE_NOTE (state) {
console.log(state.activeNote) // here the activeNote is the correctly selected note
if (typeof state.notes !== 'undefined' && state.notes.length > 0) {
state.notes.splice(state.activeNote, 1) // here no matter what the first element is removed
if (state.notes.length === 0) {
state.activeNote.text = ''
state.activeNote.favorite = false
} else {
state.activeNote = state.notes[state.notes.length - 1]
}
}
},
SET_ACTIVE_NOTE (state, note) {
state.activeNote = note
}
}
actions.js 是:
export const actions = {
deleteNote: ({ commit }) => commit('DELETE_NOTE'),
updateActiveNote: ({ commit }, note) => commit('SET_ACTIVE_NOTE', note),
}
吸气剂是:
const getters = {
activeNote: state => state.activeNote,
notes: state => state.notes,
}
我从中调用突变的组件是:
<template>
<div id="toolbar">
<i @click="deleteNote" class="glyphicon glyphicon-remove"></i>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
name: 'toolbar',
computed: mapGetters([
'activeNote'
]),
methods: mapActions([
'deleteNote',
])
}
</script>
您使用 splice 不正确。 splice 的第一个参数是 index 来开始改变数组。而不是
state.notes.splice(state.activeNote, 1)
你应该使用
state.notes.splice(state.notes.indexOf(state.activeNote), 1)
我有以下设置,尝试使用 DELETE_NOTE
突变从 notes
数组中删除 activeNote
。但它只删除数组的第一个元素。
mutations.js 是:
export const mutations = {
DELETE_NOTE (state) {
console.log(state.activeNote) // here the activeNote is the correctly selected note
if (typeof state.notes !== 'undefined' && state.notes.length > 0) {
state.notes.splice(state.activeNote, 1) // here no matter what the first element is removed
if (state.notes.length === 0) {
state.activeNote.text = ''
state.activeNote.favorite = false
} else {
state.activeNote = state.notes[state.notes.length - 1]
}
}
},
SET_ACTIVE_NOTE (state, note) {
state.activeNote = note
}
}
actions.js 是:
export const actions = {
deleteNote: ({ commit }) => commit('DELETE_NOTE'),
updateActiveNote: ({ commit }, note) => commit('SET_ACTIVE_NOTE', note),
}
吸气剂是:
const getters = {
activeNote: state => state.activeNote,
notes: state => state.notes,
}
我从中调用突变的组件是:
<template>
<div id="toolbar">
<i @click="deleteNote" class="glyphicon glyphicon-remove"></i>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
name: 'toolbar',
computed: mapGetters([
'activeNote'
]),
methods: mapActions([
'deleteNote',
])
}
</script>
您使用 splice 不正确。 splice 的第一个参数是 index 来开始改变数组。而不是
state.notes.splice(state.activeNote, 1)
你应该使用
state.notes.splice(state.notes.indexOf(state.activeNote), 1)