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

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，直接获取计算属性值

刷新之后的打印结果

解决

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

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