为何提交将Vuex state数据设为null的操作后，组件状态需刷新才更新？

嘿，我来帮你分析下这个问题～你调用Vuex的mutation把user_info设为null后，组件状态没实时更新，只有刷新才生效，问题出在组件的状态和Vuex store的关联方式上。

你的相关代码 #

store.js

state: { 
  ... 
  user_info: LocalStorageUtil.get('user_info') 
}, 
mutations: { 
  set_user_info_null(state){ 
    state.user_info = null 
  } 
}

组件代码

<!-- 模板部分 -->
<div v-if="user_info" class="welcome"> 
  <a @click="welcome_username">欢迎您,{{user_info.username}}!</a>/<a @click="logout">退出</a> 
</div> 

<!-- 脚本部分 -->
<script>
export default {
  data(){ 
    return { 
      user_info: this.$store.state.user_info, 
      ... 
    } 
  },
  methods: { 
    ... 
    logout() {
      // 这里你应该调用了mutation，但可能没清空localStorage
      this.$store.commit('set_user_info_null')
    }
  }
}
</script>

问题原因 #

组件data里的user_info是初始化时从Vuex store取的一个静态快照，它并不会自动监听store中user_info的变化。当你通过mutation修改store的状态后，组件的data变量不会同步更新，所以页面上还是显示之前的值，直到刷新页面重新初始化data才会读取新的store状态。

解决方案 #

推荐两种方式，优先选第一种：

1. 使用计算属性（最简洁的响应式方案）

把组件里的user_info从data移到computed中，计算属性会自动监听Vuex store的变化，实时更新组件状态：

export default {
  // 去掉data里的user_info定义
  data(){ 
    return { 
      ... 
    } 
  },
  computed: {
    user_info() {
      return this.$store.state.user_info
    }
  },
  methods: { 
    ... 
    logout() {
      this.$store.commit('set_user_info_null')
      // 别忘了清空localStorage，避免刷新后又读回旧值
      LocalStorageUtil.clear('user_info')
    }
  }
}

2. 用watch监听store变化（适合必须用data的场景）

如果一定要保留data里的user_info，可以通过watch监听store的状态变化，手动更新data：

export default {
  data(){ 
    return { 
      user_info: this.$store.state.user_info, 
      ... 
    } 
  },
  watch: {
    // 监听Vuex store中user_info的变化
    '$store.state.user_info'(newValue) {
      this.user_info = newValue
    }
  },
  methods: { 
    ... 
    logout() {
      this.$store.commit('set_user_info_null')
      LocalStorageUtil.clear('user_info')
    }
  }
}

额外提醒 #

退出登录时，除了修改Vuex的状态，一定要记得清空localStorage里的user_info，不然刷新页面时，store初始化又会从localStorage读取旧值，导致状态回滚。

内容的提问来源于stack exchange，提问作者user7693832