--- 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 ``` 乍一看没啥问题,父组件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 ```