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

Question

我的应用程序使用

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

在 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调用

在映射到 vue-router 中的 /about 的另一个组件中，它只是通过 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 }

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

vuex getter does not update on another component depending on timing

vue.js

vue-router

vuex