Vue3（VueCLI+VueX）待办列表如何实现正确的删除功能？

1. 修改 NoteItem.vue #

需要在点击删除按钮时传递当前项的索引，并在删除方法中调用VueX的mutation：

<template>
  <div>
    <div
      v-for="(item, index) in list"
      :key="index"
    >
      <span>{{item.title}}</span>
      <span>
        <button @click="deleteItem(index)">Delete</button>
      </span>
    </div>
  </div>
</template>

<script>
import { useStore } from 'vuex'
export default {
  setup() {
    const store = useStore()
    const list = store.state.list
    const deleteItem = (index) => {
      store.commit('deleteItem', index)
    }
    return {
      list,
      deleteItem
    }
  }
}
</script>

2. 完善 store/index.js 中的 deleteItem mutation #

根据传入的索引，从数组中移除对应的待办项：

import { createStore } from 'vuex'

export default createStore({
  state: {
    list: []
  },
  getters: {
  },
  mutations: {
    addItem(state, item) {
      state.list.push({
        title: item,
        status: 'normal'
      })
    },
    deleteItem(state, index) {
      state.list.splice(index, 1)
    }
  },
  actions: {
  },
  modules: {
  }
})

优化方案（避免重复标题删除错误） #

如果待办项可能出现重复标题，建议给每个项添加唯一ID，通过ID匹配删除更可靠：

• 修改store/index.js的addItem mutation：

addItem(state, item) {
  state.list.push({
    id: Date.now(),
    title: item,
    status: 'normal'
  })
}

• 修改NoteItem.vue的渲染和删除逻辑：

<template>
  <div>
    <div
      v-for="item in list"
      :key="item.id"
    >
      <span>{{item.title}}</span>
      <span>
        <button @click="deleteItem(item.id)">Delete</button>
      </span>
    </div>
  </div>
</template>

<script>
import { useStore } from 'vuex'
export default {
  setup() {
    const store = useStore()
    const list = store.state.list
    const deleteItem = (id) => {
      store.commit('deleteItem', id)
    }
    return {
      list,
      deleteItem
    }
  }
}
</script>

• 更新store/index.js的deleteItem mutation：

deleteItem(state, id) {
  state.list = state.list.filter(item => item.id !== id)
}

内容的提问来源于stack exchange，提问作者rottenwood