Vuex 的项目实例5 删除对应事项

1、给删除按钮添加点击事件：

<!--删除链接-->
<a slot="actions" @click="delItem(item.id)">删除</a>

<script>
export default {
  methods: {
    // 删除对应事项
    delItemById(id) {
      this.$store.commit('delItem', id)
    }
  }
}
</script>

2、在 store/index.js 文件中添加delItem ：

mutations: {
    // 根据 id 删除列表的 item 项
    delItem(state, id) {
      // 根据 id 查找对应项的索引
      state.list.forEach((item, index) => {
        if (id === item.id) {
          // 根据索引，删除对应的元素
          state.list.splice(index, 1)
        }
      })
    }

    // 也可以这样写
    delItem(state, id) {
      // 根据 id 查找对应项的索引
      const index = state.list.findIndex(item => item.id === id)
      // 根据索引，删除对应的元素
      if (index !== -1) {
        state.list.splice(index, 1)
      }
    }
  }

此时点击删除按钮，对应项的事项就被删除掉了。