Vuex异步请求数据后,在组件中获取状态的方法

Vuex官方中提到：

我们如何在 Vue 组件中展示状态呢？由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态

即如下方法，页面正常更新：

computed: {
    userAva: function () {
        return this.$store.state.userAva;
    },
    userName: function () {
        return this.$store.state.userName;
    }
}

但是这里有一个疑问，为什么获取回来的数据要自动更新到该组件内，需要使用computed来计算更新呢？如果直接赋值给data会如何？

下面我们修改代码，尝试直接修改data：

data(){
    return {
        userName: this.$store.state.userName,
        userAva: this.$store.state.userAva
    }
}
//.......

在页面刷新的时候，发送数据

mounted: function(){
    this.$store.commit('getLocalMes');
    //getLocalMes stroe中注册的方法
}

store:

state:{
    userName:"未登录",
    userAva:"assets/image/defaultAva.jpg",
},
mutations:{
    getLocalMes(state,item){
       const storage=window.localStorage;
       let loginUser =
       JSON.parse(storage.getItem('userInfo'));
       if(loginUser){
          state.userName = loginUser.loginName;
          state.userAva = loginUser.loginNav;
       }
      }
  }

template:

<div class="listAva">
    <img v-bind:src="userAva" alt="">
div>
<div class="userName">{{userName}}div>

修改代码后刷新页面，发现页面并未显示更新到数据，而是取的默认state里面的值。

在getLocalMes方法中增加log，发现页面更新时，触发了方法！但是为什么数据并没有更新呢？

原因是，在mounted的时候，页面重新渲染，而store里面的state数据也同时更新。所以我们没有办法保证，在页面加载完的时候，data中userName:this.$store.state.userName,userAva: this.$store.state.userAva，被赋的值是默认的，还是更新之后的。

这样看起来不太好理解，举一个简单的栗子：

var a = 1;
var b = a;
a = 2;
console.log(b)//b=1
//这里 a = 1;相当于userName = store中的state默认值
//b = a; 相当于 data中的  userName: this.$store.state.userName
//a = 2;相当于 store中的 state.userName = loginUser.loginName;
所以最终页面还是加载的 state默认值，如同consle.log(b) //b = 1 一样


如果我们在 b=a 之间添加一个延时器（setTimeout），就变成了：
var a = 1;
a = 2;
var b = a;
console.log(b) //b = 2
我们改变赋值的位置，当 a=2 之后，我们再让 b=a，所以此时的 b 就更新到了最新的数据。

由此，我们修改代码

data(){
    return {
        userName: '',
        userAva: ''
    }
}

mounted:

mounted: function(){
    this.$store.commit('getLocalMes');
    setTimeout(function(){
        this.userName = this.$store.state.userName;
        this.userAva = this.$store.state.userAva;
    },10)
}

刷新页面，数据正常更新！

vue中提供$nextTick()异步加载方法，代替setTimeout()

mounted: function(){
    this.$store.commit('getLocalMes');
    this.$nextTick(()=>{
        this.userName = this.$store.state.userName;
        this.userAva = this.$store.state.userAva;
    });
}

到这里还有一个疑问，为什么使用computed来计算更新，就可以将获取回来的数据要自动更新到该组件内？
众里寻他千百度之后，找到如下解释（原文链接）：

计算属性是基于它的依赖缓存的。计算属性在它的相关依赖发生改变时会重新取值，所以数据发生变化时，计算属性的值会进行更新，相关的模板引用也会重新渲染。

---

总结： Vuex异步请求数据后,在组件中获取状态的方法，可以通过computed 计算属性方式，也可以通过直接赋值的方式，但要注意在加载完之后赋值。