更新数组后，Vuex getter没有更新值

Question

我正在尝试探索vuex，所以我试图做的是在删除或向其中添加值时获取count或数组。以下是我的代码。

home.vue模板

<template> 
    <div :class="page.class" :id="page.id"> 
     <h3>{{ content }}</h3> 
     <hr> 
     <p>Registered users count {{ unRegisteredUserCount }}</p> 
     <ul class="list-unstyled" v-if="getUnRegisteredUsers"> 
      <li v-for="(unregistereduser, n) in getUnRegisteredUsers" @click="register(unregistereduser)"> 
       {{ n + 1 }} 
       - {{ unregistereduser.id }} 
       {{ unregistereduser.fname }} 
       {{ unregistereduser.lname }} 
      </li> 
     </ul> 
     <hr> 
     <p>Registered users count {{ registeredUserCount }}</p> 
     <ul class="list-unstyled"> 
      <li v-for="(registereduser, n) in getRegisteredUsers" @click="unregister(registereduser)"> 
       {{ n + 1 }} 
       - {{ registereduser.id }} 
       {{ registereduser.fname }} 
       {{ registereduser.lname }} 
      </li> 
     </ul> 
    </div> 
</template> 

<script> 
    export default { 
     name: 'home', 
     data() { 
      return { 
       page: { 
        class: 'home', 
        id: 'home' 
       }, 
       content: 'This is home page' 
      } 
     }, 
     computed: { 
      getUnRegisteredUsers() { 
       if(this.$store.getters.getCountUnregisteredUsers) { 
        return this.$store.getters.getAllUnRegisteredUsers; 
       } 
      }, 
      getRegisteredUsers() { 
       if(this.$store.getters.getCountRegisteredUsers > 0) { 
        return this.$store.getters.getAllRegisteredUsers; 
       } 
      }, 
      unRegisteredUserCount() { 
       return this.$store.getters.getCountUnregisteredUsers; 
      }, 
      registeredUserCount() { 
       return this.$store.getters.getCountRegisteredUsers; 
      } 
     }, 
     methods: { 
      register(unregistereduser) { 
       this.$store.commit({ 
        type: 'registerUser', 
        userId: unregistereduser.id 
       }); 
      }, 
      unregister(registereduser) { 
       this.$store.commit({ 
        type: 'unRegisterUser', 
        userId: registereduser.id 
       }); 
      } 
     }, 
     mounted: function() { 

     } 
    } 
</script> 

state.js

export default { 
    unRegisteredUsers: [ 
     { 
      id: 1001, 
      fname: 'John', 
      lname: 'Doe', 
      state: 'Los Angeles', 
      registered: false 
     }, 
     { 
      id: 2001, 
      fname: 'Miggs', 
      lname: 'Ollesen', 
      state: 'Oklahoma', 
      registered: false 
     }, 
     { 
      id: 3001, 
      fname: 'Zoe', 
      lname: 'Mcaddo', 
      state: 'New York', 
      registered: false 
     }, 
     { 
      id: 4001, 
      fname: 'Jane', 
      lname: 'Roberts', 
      state: 'Philadelphia', 
      registered: false 
     }, 
     { 
      id: 5001, 
      fname: 'Ellen', 
      lname: 'Jennings', 
      state: 'Houston', 
      registered: false 
     }, 
     { 
      id: 6001, 
      fname: 'Joseph', 
      lname: 'Reed', 
      state: 'Boston', 
      registered: false 
     }, 
     { 
      id: 7001, 
      fname: 'Jake', 
      lname: 'Doe', 
      state: 'Portland', 
      registered: false 
     } 
    ], 
    registeredUsers: [] 
} 

getters.js

export default { 
    getAllUnRegisteredUsers(state) { 
     return state.unRegisteredUsers; 
    }, 
    getAllRegisteredUsers(state) { 
     return state.registeredUsers; 
    }, 
    getCountUnregisteredUsers(state) { 
     return state.unRegisteredUsers.length; 
    }, 
    getCountRegisteredUsers(state) { 
     return state.registeredUsers.length; 
    }, 
    getUserById(state) { 

    } 
} 

mutations.js

export default { 
    registerUser(state, payload) { 
     //find user 
     const user = _.find(state.unRegisteredUsers, { 
      'id': payload.userId 
     }); 

     // remove user from original array 
     _.remove(state.unRegisteredUsers, { 
      'id': payload.userId 
     }); 

     // set user object key value 
     user.registered = 'true'; 

     // add user to new array 
     state.registeredUsers.push(user); 

     console.log(state.registeredUsers.length + ' - registered users count'); 
    }, 
    unRegisterUser(state, payload) { 
     //find user 
     const user = _.find(state.registeredUsers, { 
      'id': payload.userId 
     }); 

     // remove user from original array 
     _.remove(state.registeredUsers, { 
      'id': payload.userId 
     }); 

     // set user object key value 
     user.registered = 'false'; 

     // add user to new array 
     state.unRegisteredUsers.push(user); 

     console.log(state.unRegisteredUsers.length + ' - unregistered users count'); 
    } 
} 

在页面加载它呈现阵列正常计数，但是当我删除值的registeredUsers和unRegisteredUsers计数不更新。我在这里错过了什么？任何人都可以解释，我应该怎么做才能得到正确的数量？谢谢

Answer 1

这是不工作的原因是你正在变异的数组。永远不要改变数组。您将花费数小时尝试排除反应性破坏的原因。

用新数组替换值以保留反应性。使用_.filter或_.reject，如下例所示。

state.registeredUsers = _.reject(state.registeredUsers, { 
    'id': payload.userId 
}); 

choasia的其他回答是不正确的。 Lodash不是问题。 Lodash对Vuejs非常有用，你只需要使用显式地返回一个新数组的函数。查看“回报”下的Lodash文档以了解它返回的内容。

Answer 2

由于JavaScript的限制，修改vuejs（以及vuex）中的列表或对象为tricky。
看来您正在使用lodash删除数组中的项目。它会与vuejs的反应性产生冲突。 See issue here。
如果要删除数组中的某个项目，最好使用splice这样做。