Vuex中从数组移除元素问题：新手实现取消点赞功能遇阻

看起来你在Vuex的mutation里处理取消点赞时遇到了小问题，我帮你梳理下问题点和解决方案：

问题分析 #

从你的代码片段能看到几个关键问题：

1. 用错了数组方法：find()方法只是返回第一个匹配的元素，并不会帮你修改数组，你需要先找到元素的索引再执行移除操作。
2. 代码拼写不完整：你写的state.user.liked_ite...明显是截断了，应该是state.user.liked_items，这会直接导致代码无法正常执行。
3. 忽略了Vue的响应式规则：直接修改数组索引或用delete删除元素，Vue无法检测到数组变更，必须用Vue支持的数组变更方法（比如splice）。

修正后的Mutation代码 #

mutations: {
  SET_TOGGLE_LIKED: (state, { global_id }) => {
    alert('here is global_id: ' + global_id)
    // 找到匹配元素的索引
    const itemIndex = state.user.liked_items.findIndex(obj => obj.global_id === global_id)
    
    // 确认找到元素后执行移除
    if (itemIndex !== -1) {
      console.log('that exists at index: ' + itemIndex + ' current length: ' + state.user.liked_items.length)
      // 使用splice确保Vue能检测到数组变更
      state.user.liked_items.splice(itemIndex, 1)
      console.log('after removal, length: ' + state.user.liked_items.length)
    }
  }
}

额外提示 #

• 确保state.user和state.user.liked_items在Vuex的state里已经正确初始化（比如liked_items: []），避免出现Cannot read property 'liked_items' of undefined的错误。
• 如果你的需求是切换点赞状态（而非单纯取消），可以在找到索引后判断：存在则移除，不存在则把对应对象添加到数组中。

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