本文共 776 字，大约阅读时间需要 2 分钟。

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 对象

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

普通ajax和asyncData对比

1.3 使用asyncData–多次请求

1.4 fetch发送ajax

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

1.5 nuxt 整合 vuex

//state区域，相当于定义变量export const state = () => ({
     })//mutations区域，用于修改数据export const mutations = {
     方法名 (state,值) {
         }}

nuxt.js官网可以搜到

转载地址：http://yfbef.baihongyu.com/