Nuxt简单入门3

---

一、ajax操作

nuxt整合axios （nuxt核心配置文件 nuxt.conf.js）

1.asyncData：多次请求

• 目标：希望在asyncData函数中，可以发送多次ajax请求

• 使用 Promise.all( 多次请求 )

 export default {
    async asyncData( content ) {
        let [{数据:别名1},{数据:别名2}] = await Promise.all([ ajax请求1, ajax请求2])
        return {
            变量1: 别名1,
            变量2: 别名2
        }
    },
}

1.2.体验一下

<template>
  <div>
    第一次请求：{{ feignEcho }} <br/>
    第二次请求：{{ restEcho }} <br/>
  </div>
</template>

<script>
export default {
  /*
  async asyncData( context ) {
    let { data } = await context.$axios.get('自己随意启动一个后端')
    return {
      feignEcho : data
    }
  },
  */
 /*
  async asyncData( context ) {
    let { data } = await context.$axios.get('自己随意启动一个后端')
    return {
      restEcho : data
    }
  },
  */
  async asyncData ( context ) {
    let [ { data : feignEcho } , { data : restEcho } ] = await Promise.all([
      context.$axios.get('自己随意启动一个后端'),
      context.$axios.get('自己随意启动一个后端')
    ])
    // 返回结果
    return {
      feignEcho,
      restEcho
    }
  }
}
</script>

<style>

</style>

2.1回顾vuex

• vuex 作用：在组件之间共享数据
• 在vuex中管理数据（存放数据、获取数据）
  · vuex 位置：项目/store/index.js
  ·内容：state 存放数据、mutations 修改数据、 action 触发mutation （发送ajax）

export const state = () => ({
  str: '哈哈',
  num: 10
})

export const mutations = {
  setData (state, value) {
    state.str = value
  },
  setNum (state, value) {
    state.num = value
  }
}

2.2体验一下

• 获得vuex中的数据

 <template>
  <div>
    {{$store.state.str}}
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

• 修改vuex的数据

<template>
  <div>
    {{$store.state.str}}
    <input type="button" @click="changeData" value="点我修改数据" />
  </div>
</template>

<script>
export default {
  methods: {
    changeData() {
      // 通过提交vuex，执行mutations进行数据的修改
      this.$store.commit('setData', '吃俺老孙一棒')
    }
  },
}
</script>

<style>

</style>

2.3 使用fetch发送ajax

• 现象：在vuex中，如果页面一刷新，vuex中的数据重置。
• 目标：使用fetch提前将数据存放到vuex中
• 介绍
  
• 体验一下
• 编写fetch查询ajax，并将结果存放到vuex中
• 页面中获得vuex中的数据（数据为查询的结果，不是默认值）

<template>
  <div>
    {{$store.state.str}}
  </div>
</template>

<script>
export default {
  async fetch( {store, $axios} ) {  //变量context，并解构 store和$axios
    // 发送ajax
    let { data } = await $axios.get('自己启动后端的路径')
    // 将结果存放到vuex中
    store.commit('setData', data )
  }
}
</script>

<style>

</style>

2.4 插件： 自定义axios

• 1.目标：将所有的ajax的请求路径，都提取到api文件中，方便后期的维护。
• 采用nuxt提供插件机制，将已经整合到nuxt中axios，进行二级加工。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210510201704712.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjE1ODE0MQ==,size_16,color_FFFFFF,t_70)
//方式1：通过src设置文件，通过mode设置模式
plugins: [
	{ src: '~/plugins/apiclient.js', mode: 'client' },		//前端客户端
	{ src: '~/plugins/apiserver.js', mode: 'server' },		//前端服务端
    { src: '~/plugins/api.js' }		//前端客户端 + 前端服务端
]

//方式2：通过命名来确定模式
plugins: [
    '~/plugins/api.client.js',				//前端客户端
    '~/plugins/api.server.js',				//前端服务端
    '~/plugins/api.js',						//前端客户端 + 前端服务端
]

• 编写插件
  

 // request变量是常量
const request = {
  test() {
    return axios.get('/service-consumer/feign/echo/abc')
  },
}


//定义成员变量，保存axios对象
var axios = null

export default ( { $axios }, inject ) => {

  //3） 保存内置的axios
  axios = $axios

  //4) 将自定义函数交于nuxt
  // 使用方式1：在vue中，this.$request.xxx()
  // 使用方式2：在nuxt的asyncData中，content.app.$request.xxx()

  inject('request', request)
}

• 使用插件发送ajax

<template>
  <div>
    {{msg}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: ''
    }
  },
  async mounted() {
    //发送ajax
    let { data } = await this.$request.test()
    this.msg = data
  },
}
</script>

<style>

</style>

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。