vuex——计算属性获取的getter值需要刷新才能更新

我会带着你远行 2022-11-15 05:58 232阅读 0赞

## vuex——计算属性获取的getter值需要刷新才能更新 ##

#### 描述： ####

// state
     state: { 
        leader: null
     },
     // getters
     getters: { 
        getLead: state => state.leader
     }
     // mutations
     mutations: { 
        setLead (state, data) { 
          state.leader = data
        }
     },
    // 页面中赋值
    // 登录时改变state.leader的值
    this.$store.commit('setLead', true)
    // 组件中计算属性监听
    import {  mapGetters } from 'vuex'
    computed: { 
       leader () { 
         ...mapGetters(['getLead'])
       }
     }

#### 打印this.leader，直接获取计算属性值 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0p1bGlldF94bWo_size_16_color_FFFFFF_t_70]

#### 刷新之后的打印结果 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0p1bGlldF94bWo_size_16_color_FFFFFF_t_70 1]

### 解决 ###

#### 增加监听函数watch，修改计算属性 ####

computed: { 
         ...mapGetters(['getLead'])
         //原来
       		//leader () { 
        	// ...mapGetters(['getLead'])
       		//}
     }
    watch: { 
        // 监听getters数据 --- 'getLead'
        // 解决state数据可以更新，但getters数据需要刷新才能更新的问题
        getLead (val) { 
          this.leader = val
          // this.leader是data中自定义的值，
          // 赋值之后，一定要重写之后的方法，
          // 不然只是取值，页面操作依然不会改变
          this.showVip() // 这是我页面上的方法名
        }
      },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0p1bGlldF94bWo_size_16_color_FFFFFF_t_70]: /images/20221022/5d4de8cc10f24c15a3addaf611091db2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0p1bGlldF94bWo_size_16_color_FFFFFF_t_70 1]: /images/20221022/ae32067a4b2a47d792cdb97e7b990eb6.png