基于nuxt下asyncData,fetch发送axios请求(四)

1. 基于nuxt下asyncData,fetch发送axios请求

1.1 普通ajax（nuxt和axios整合)

使用前提：配置baseURL

  axios: {
   baseURL:'http://localhost:10010/api'
 },

• 普通axios操作

this.$axios 就可以获得axios实例，从而发送ajax
//get请求
this.$axios.get('路径',参数)
//post请求
this.$axios.post('路径',参数)

1.2 使用asyncData–一次请求

• asyncData 方法，在渲染组件之前异步获取数据。
• asyncData方法会在组件（限于页面组件）每次加载之前被调用。
  • asyncData方法在组件渲染之前执行了，组件还没有渲染，没有this。
  • 在asyncData方法中，不能使用this。
    
• asyncData语法1：使用 context 对象

<template>
	{{名称}}
</template>
<script>
export default {
    //asyncData不能使用this（当前组件）
    //提供第一个参数context，表示上下文（nuxt所有功能）
    asyncData( context ) {
        //发送ajax
        let 数据 = context.$axios.get('','')
        // 将数据组合并返回
        return {
            名称: 数据
        }
    }
}
</script>

• asyncData语法2：对context对象进行解构，context.$axios —> { $axios }

<script>
export default {
    async asyncData( {$axios} ) {
        //发送ajax
        let { data } = await $axios.get('路径')
        //封装
        return {
            变量: 查询数据
        }
    }
}
</script>

普通ajax和asyncData对比

1.3 使用asyncData–多次请求

<script>
//很少直接使用“响应对象”
export default {
    async asyncData( {$axios} ) {
        //发送多次请求
        let [响应1,响应2] = await Promise.all([请求1, 请求2])
        //返回数据
        return {
            变量1: 响应1,
            变量2: 响应2
        }
    }
}
</script>

<script>
//对“响应对象”进行解构   响应1 --> { data }
//“响应1”和“响应2”，都可以解构出data，变量名重复，建议采用别名 { data: 别名}
export default {
    async asyncData( {$axios} ) {
        //发送多次请求
        let [ { data: d1 }, {data:d2} ] = await Promise.all([请求1, 请求2])
        //返回数据
        return {
            变量1: d1.data, 
            变量2: d2.data
        }
    }
}
</script>

1.4 fetch发送ajax

• fetch 方法用于在渲染页面前填充应用的状态树（store）数据， 与 asyncData 方法类似，不同的是它不会设置组件的数据。
  
  

1.5 nuxt 整合 vuex

//state区域，相当于定义变量
export const state = () => ({
  
})

//mutations区域，用于修改数据
export const mutations = {
  方法名 (state,值) {
    
  }
}

nuxt.js官网可以搜到