您的位置：首页 > 产品设计 > UI/UE

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

2017-05-12 18:11 330 查看

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 计算属性方式，也可以通过直接赋值的方式，但要注意在加载完之后赋值。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航