代码之家  ›  专栏  ›  技术社区  ›  nos

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

  •  0
  • nos  · 技术社区  · 7 年前

    我的应用程序使用

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

    在App.vue中,将调度提取

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

    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 通过吸气剂。

    现在,应用程序的行为取决于时间。如果我访问 / /关于 / 首先,快速导航到 /关于 这个 用户数 0 . 但在控制台中,它仍然显示正确的用户计数(从登录开始) SET_USERS ).

    使用者 然后再次呈现HTML显示?

    1 回复  |  直到 7 年前
        1
  •  0
  •   Rodrigo Martín de Lamo    7 年前

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

    抄袭 https://vuex.vuejs.org/guide/mutations.html :

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

    state.obj = { ...state.obj, newProp: 123 }
    
    推荐文章