监听vuex值变化实时改变

问题如图：

头部是一个组件，想在这个页面修改用户名点击确认修改后，头部名称跟到变化。

思路：用户名在登录成功过后，存在vuex里面并且保存在本地（防止刷新消失）

this.$store.commit('set_userName',res.data.data.username)

 vuex中state.js ：

userName:localStorage.getItem('userName') ? localStorage.getItem('userName') : '',

mutations.js

set_mobile(state,mobile){
    state.mobile=mobile
    localStorage.setItem('mobile', mobile);
  },

要取用户名就用

this.$store.state.userName;

要存用户名就用

this.$store.commit('set_userName',this.newName)

好！！重要的来了，就是在头部组件里面写监听事件，监听用户名改变时，随着变化

watch:{
      '$store.state.userName':function(){ //监听vuex中userName变化而改变header里面的值
        this.userName=this.$store.state.userName;
      }
    },

这样就可以实现在其他页面改变用户名达到实时变化