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

101 阅读 0 评论 67 点赞

我是靠谱客的博主火星上微笑，这篇文章主要介绍Vuex异步请求数据后,在组件中获取状态的方法，现在分享给大家，希望可以做个参考。

Vuex官方中提到：

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

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

复制代码

1
2
3
4
5
6
7
8
computed: {
userAva: function () {
return this.$store.state.userAva;
},
userName: function () {
return this.$store.state.userName;
}
}

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

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

复制代码

1
2
3
4
5
6
7
data(){
return {
userName: this.$store.state.userName,
userAva: this.$store.state.userAva
}
}
//.......

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

复制代码

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

store:

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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:

复制代码

1
2
3
4
<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，被赋的值是默认的，还是更新之后的。

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 就更新到了最新的数据。

由此，我们修改代码

复制代码

1
2
3
4
5
6
data(){
return {
userName: '',
userAva: ''
}
}

mounted:

复制代码

1
2
3
4
5
6
7
mounted: function(){
this.$store.commit('getLocalMes');
setTimeout(function(){
this.userName = this.$store.state.userName;
this.userAva = this.$store.state.userAva;
},10)
}

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

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

复制代码

1
2
3
4
5
6
7
mounted: function(){
this.$store.commit('getLocalMes');
this.$nextTick(()=>{
this.userName = this.$store.state.userName;
this.userAva = this.$store.state.userAva;
});
}