vuex getter不根据时间更新另一个组件。

Question

我的应用程序

• axios从后端服务器获取用户信息
• vuex用于存储用户
• vue-路由器在每个用户的页面上导航

在App.vue中，提取被分派。

export default {                                                                   
  name: 'app',                                                                     
  components: {                                                                    
    nav00                                                                          
  },                                                                               
  beforeCreate() {                                            
    this.$store.dispatch('fetchUsers')                               
  }                                                                                
}                                                                                  

在store.js中，users是一个具有用户信息的pk (主键)的对象。

export default new Vuex.Store({                                                 
  state: {                                                                      
    users: {},     
  },
  getters: {
    userCount: state => {                                                       
      return Object.keys(state.users).length                                    
    } 
  },
  mutations: { 
    SET_USERS(state, users) { 
      // users should be backend response 
      console.log(users.length)                                                                   
      users.forEach(u => state.users[u.pk] = u) 
  actions: { 
    fetchUsers({commit}) { 
      Backend.getUsers()                                   
        .then(response => {                             
          commit('SET_USERS', response.data)                       
        })                                       
        .catch(error => {                        
          console.log("Cannot fetch users: ", error.response)                   
        }) 
})

这里，Backend.getUsers()是一个axios调用。

在另一个映射到/about的vue-router组件中，它只是通过getter显示userCount。

现在，应用程序的行为取决于时间。如果我先访问/，等待2-3秒，然后转到/about，则userCount将正确显示。但是，如果我直接访问/about，或者首先访问/并快速导航到/about，那么userCount就是0。但是在控制台中，它仍然显示正确的用户计数(来自SET_USERS中的日志)。

我错过了什么？商店getter不应该看到users中的更新并再次呈现HTML吗？

Answer 1

因为它是一个对象，所以Vue无法检测属性的变化，而且在计算属性时，它的反应性甚至更低。

从https://vuex.vuejs.org/guide/mutations.html复制

当向对象添加新属性时，您应该：

Use Vue.set(obj, 'newProp', 123)，或

将该对象替换为一个新的对象。例如，使用对象扩展语法，我们可以这样编写它：

state.obj = { ...state.obj, newProp: 123 }