登录
nuxt 配 modules模块 以及 数据交互
- 类型
Array
modules是Nuxt.js扩展，可以扩展它的核心功能并添加无限。
例如(nuxt.config.js)：
export default {
modules: [
// Using package name
'@nuxtjs/axios',
// Relative to your project srcDir
'~/modules/awesome.js',
// Providing options
['@nuxtjs/google-analytics', { ua: 'X1234567' }],
// Inline definition
function() {}
]
}
安装过程中，它会让我们选择模块。
Axios - Promise based HTTP client
// nuxt.config.js
{
modules: [
'@nuxtjs/axios' // 前面安装nuxtjs的时候没选，也可以后续一条命令去装上去 ==> npm install @nuxtjs/axios -initial-scale
]
}
// 笔记.html
一、安装nuxt的axios
1.1 npm install @nuxtjs/axios -S
1.2 nuxt.config.js进行配置
modules: [
'@nuxtjs/axios',
]
二、安装axios
2.1 npm install axios -S
在每一个页面中或者每个component中用axios。
<template>
<div>页面</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'IndexPage'
}
</script>
在nuxt中如何请求接口。两种方式：
异步数据
请求接口一定是首先先把服务器端的接口拿到了。然后再打开页面，这个时候源代码中就有接口数据了。那这个时候蜘蛛就可以爬取到这个数据了。如果还是像vue一样，这个页面打开了，再把数据返回来，那蜘蛛就抓取不到了。
在页面中有一个生命周期。叫asyncData。
Nuxt.js扩展了Vue.js，增加了一个叫asyncData的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。
asyncData
这个是个生命周期。
asyncData方法会在组件（限于页面组件）每次加载之前被调用。可在服务端或路由更新之前被调用。
在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，可以用asyncData方法来获取数据，
三、asyncData生命周期 || 方法
pages 目录中的页面组件才可以去用
***注意components内的.vue文件是不可以使用的。
// index.vue
<template>
<div>首页</div>
</template>
<script type="text/script">
export default {
data() {},
asyncData(app) {
console.log(app)
}
}
</script>
可以看到，app对象下面有一个$axios；
在控制台，和在服务端都可以打印出来。
所以也可以这样子写：
// index.vue
<template>
<div>首页</div>
</template>
<script type="text/script">
export default {
data() {},
asyncData({ $axios }) {
console.log($axios)
}
}
</script>
这样子就可以去请求接口，放进去。
接口给过来，都是后端代码上面去解决跨域问题。至于nuxt如何解决跨域，待会说。
这里写一个async 和 await
// pages/index.vue
<template>
<div>首页</div>
</template>
<script>
export default {
name: 'IndexPage',
async asyncData({ $axios }) {
const res = await $axios('后端给的接口地址')
console.log(res)
}
}
</scirpt>
拿到数据之后呢，要把数据渲染到也米娜上，如果是vue的话，
// pages/index.vue
<template>
<div>
<ul>
<li v-for='item in list' :key='item.id'>
{{ item.imageName }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'IndexPage',
data () {
return {
list: []
}
},
async asyncData({ $axios }) {
const res = await $axios('后端给的接口地址')
const list = res.data
console.log(res)
// 要这样
return { list }
// 不要这样
this.list = list
}
}
</scirpt>
按照vue来讲，这上面完全没问题，但是nuxt中不行。其实不是nuxt不行，而是asyncData不行，在asyncData中是不能写this的，因为在asyncData中this是undefined。
注意：在asyncData中没有this。
其实在这个地方，有写到，说要return。说白了,nuxt.js会将asyncData返回的数据融合组件data方法返回的数据并返回给当前组件。
其实就是data () { return { list: [] } }，和asyncData里面的return 合并数据，然后。
然后重新去看页面，就可以看到页面生效了。
fetch
还有方式请求接口。
四、fetch生命周期 || 方法
首先fetch是在aysncData之后的生命周期，然后fetch也有参数({ $axios })，它也是当前组件的上下文，所以这里的$axios也有接口请求，
// pages/index.vue
<template>
<div>
<News />
<ul>
<li v-for='item in list' :key='item.id'>
{{ item.imageName }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'IndexPage',
data () {
return {
list: [],
items: []
}
},
async asyncData({ $axios }) {
const res = await $axios('后端给的接口地址')
const list = res.data
console.log(res)
// 要这样
return { list }
// 不要这样
this.list = list
},
// 注意fetch里面是可以有this的
async fetch({ $axios }) {
const res = await $axios('后端给的接口地址')
const list = res.data
this.items = list
}
}
</scirpt>
不过在页面上能拿到数据，不过在template上打印出来是空数组。所以说在页面级的请求用asyncData。
四、fetch生命周期 || 方法
fetch是有this的
在components下创建个News.vue:
<template>
<div>111</div>
</template>
<script>
export default {
// 注意fetch里面是可以有this的
async fetch({ $axios }) {
const res = await $axios('后端给的接口地址')
const list = res.data
this.items = list
}
}
</script>
刚刚提到的一点，asyncData在页面级别的组件是可以拿到的，可以执行的，在某个组件中，component中。asyncData是不能用在component上的，那它这种只能引入fetch，必须用fetch。
fetch方法用于在渲染页面前填充应用的状态树（store）数据，与asyncData方法类似，不同的是它不会设置组件的数据。
四、fetch生命周期 || 方法
fetch是有this的
在components下创建个News.vue:
<template>
<div>111</div>
</template>
<script>
export default {
// 注意fetch里面是可以有this的
async fetch({ $axios }) {
// 在组件中，这里是没有$axios的，
const res = await $axios('后端给的接口地址')
const list = res.data
this.items = list
}
}
</script>
<template>
<div>
111
{{ list }}
</div>
</template>
<script>
export default {
data () {
return {
list
}
},
// 注意fetch里面是可以有this的
async fetch() {
// 正确
const res = await this.$axios('后端给的接口地址')
const list = res.data
this.list = list
}
}
</script>
