nuxt.js基础入门教程

nuxt入门教程(九)异步获取数据

2019-11-02  本文已影响0人  党云龙

如何使用异步数据?


官方声明

官方:不能在组件中使用异步。
但是你可以在父级使用异步,在通过组件传值的方法传给你的组件。

所以,我这里使用了vuex。看代码

首页中调用


首页拿到数据以后,先给自己的data暂存一下,然后在通过created周期,通过commit发送给vuex即可,或者通过props发送给组件。

asyncData(context) {
        return context.$axios.get('index/query')
        .then(res => {
          //赋值
          return {index:res.data.result[0]};
        })
      },


created:function(){
        //首页数据提交给vuex
        this.$store.commit('getIndex',this.index)
        //console.log("页面加载完毕!");
      },

组件页面

<p>站长:党云龙 QQ:{{$store.state.index.qq}} 微信:{{$store.state.index.wx}} 联系电话...
上一篇 下一篇

猜你喜欢

热点阅读