---
title: "Vue Axios请求数据 + 子组件渲染踩坑实例记录与解决方案"
categories: [ "程序人生","前端技术" ]
tags: [ ]
draft: false
slug: "vue-issue-1"
date: "2020-11-09 09:37:00"
---
今日用 Vue 做前端学习时,踩到了一个大多数人都踩过的坑,特此记录。
代码如下:
**parent.vue**
```html
```
**child.vue**
```html
{{ message }}
```
乍一看没啥问题,父组件created钩子进行axios请求,子组件拿到时在控制台输出数据。
但是控制台却报错了,message undefined
查了半天,生命周期也查过了,没有问题。
原因十分简单,就是父组件在进行axios请求时,子组件还没有拿到message数据
所以在进行console.log的时候 数据自然不能输出
报错 undefined
当然,在子组件的视图中,能够正常显示。
因为数据请求十分快速,又因为是Vue的双向数据绑定,所以更新渲染视图那一步就容易被忽略。
## 总结
异步编程很容易踩坑,尤其是前端的做 XHR 请求的时候,十分容易没拿到数据就急着往视图上面渲染。
解决方案可以在视图上加一个v-if
**child.vue**
```html
{{ message }}
```
第二个解决方案就是用 Vuex 管理全局状态。
**vuex / index.js**
```js
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
message: ''
},
mutations: {
changeData(data) {
this.message = data
}
},
actions: {
getDataAction({ commit }) {
axios.get('/static/data.json')
.then((res) => {
commit('changeData', res.data)
})
.catch((error) => {
console.log(error)
})
}
}
})
```
**child.vue**
```html
{{ message }}
```