vue学习经验之axios中数据无法取出问题

前言

昨天在写axios取出后台数据时，不能给组件定义的data中的数据传值，开始的时候以为是不是生命周期钩子用错了，后来发现没错，又以为是不是promise异步的问题，发现也不是，最后查询资料发现是一个很小的写法问题，现在分享一下，供大家参考：

1.相关值与代码

template：{{chose}}
data:function(){

return{ chose:'这是测试1'}

}
钩子：

beforeMount:(to, from, next)=>{
axios({
        method: 'post',
        url: '/users'
      }).then(function(res){
        if(res.data){
            var data=res.data;
            this.chose=data.chose;//此处应返回：这是测试2
        }else{
            alert('查询失败')
        }
      }).catch(function (error) {
        console.log(error);
      })
}

2.分析及解决

这段代码实现的效果就是在未挂载前发一个ajax,回应的数据是：‘这是测试2’
data与template中都没用问题,但是页面上并没有显示我想要的数据,问题出现在beforeMount中，

错误1：定义钩子函数时用了箭头函数

此时会报错
(to, from, next)=>{}

应为：function(to, from, next){}的定义方式

错误2：.then（）的回调函数

应写成箭头函数

.then(res=>{
......
})