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呼叫。

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

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

我在这里想念什么？商店获取者不应该在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不会根据时间在其他组件上更新

1 个答案: