vuex - 从 Vuex 中的数组中删除项目

Question

我刚刚开始使用 Vuex，但遇到了问题(这可能是我的一些无能为力的语法错误)。我有一个用户喜欢 like_items 并且有一个网络调用，它与一个项目不同。

mutations: {
SET_TOGGLE_LIKED: (state, { global_id }) => {
  alert('here is global_id: ' + global_id)
 state.user.liked_items.find((obj,i) => {
   if(obj.global_id === global_id){ // no global_id
      console.log('that exists at i: ' + i + ' with length: ' + state.user.liked_items.length)
      state.user.liked_items.splice(i, 1)
      console.log('that exists at i: ' + state.user.liked_items.length)
   }else{
     console.log('that doesnot exist!')
   }
 })
}

我遇到的问题是，从 like_items 列表中删除一个项目后，它似乎被召回，并且我收到一个错误，即 global_id 在 undefined 上不存在。

我可以通过以下方式修复:

 state.user.liked_items.find((obj,i) => {
   if(obj){
     if(obj.global_id === global_id){

但是为什么我需要在这里检查 obj 的存在？

Answer 1

我们还可以使用 映射 来获取 存储数组 中对象的 index 并使用以下方法将其删除:

突变

REMOVE_OBJECT_FROM_ARRAY: (state, payload) => {
    const i = state.someArrayofObjects.map(item => item.id).indexOf(payload.id);
    state.someArrayofObjects.splice(i, 1);
  }

这里， id 是与有效载荷一起传递给 MUTATION 的 id ，我们也可以只传递 id 作为整个 payload 。在这种情况下，我们可以执行以下操作:

REMOVE_OBJECT_FROM_ARRAY: (state, payload) => {
    const i = state.someArrayofObjects.map(item => item.id).indexOf(payload);
    state.someArrayofObjects.splice(i, 1);
  }