-1- Nuxt 中的页面特指在 pages 文件夹中的 vue 组件。
-2- Nuxt 中的页面保留了 Vue 组件中的生命周期函数，在此基础上又提供了两个比较重要的函数，可以把它们理解为”新增的生命周期函数“，类似而又不同，感觉某种意义上可以替代 Vue 原有的生命周期函数了。
-3- asyncData()
-3-1- 一个既可以运行在服务端也可以运行在客户端的方法，我们可以通过 process.server / process.client / process.static 来确定或指定代码在什么环境下执行。
-3-2- 在页面组件每次加载前调用，可以在服务端或路由更新之前被调用
-3-3- asyncData的第一个参数是当前页面的上下文对象，具体可以参考文档【https://zh.nuxtjs.org/api/context】
-3-4- 可以用 asyncData方法来获取数据并返回给当前组件（设置组件的数据），具体操作就是得到值后，设置得到的值到 Vue 组件的 data 中，这样页面就可以直接使用了，例如
export default {
data () {
return { num: 0 } // 默认值
},
asyncData (context) {
// TODO
return { num: 10 } // 方法执行后，经过各种计算后的值，直接 return 即可
}
}
-3-5- asyncData方法是在组件 初始化 前被调用的，不能通过 this 来访问组件的实例对象
-4- fetch() 方法
-4-1- 用于在渲染页面前填充应用的状态树（store）数据， 与 asyncData 方法类似，不同的是它不会设置组件的数据
-4-2- 在组件每次加载前被调用（在服务端或切换至目标路由之前）
-4-3- 第一个参数是页面组件的上下文对象 context，我们可以用 fetch 方法来获取数据填充应用的状态树
<template>
<h1>Num: {{ $store.state.num }}</h1>
</template>
<script>
export default {
async fetch ({ store, params }) {
let { data } = await axios.get('http://localhost:3000/api/user/list')
store.commit('setNum', data.num)
}
}
</script>
-4-4- 不能在内部使用 this 获取组件实例，fetch是在组件初始化之前被调用
-4-5- 如果要在fetch中调用并操作store，请使用store.dispatch
是不是有点晕，总结一下这两个方法吧：它们都可以运行在前后台；它们都可以发起请求，但是都不会在浏览器的工具栏中看到请求（因为请求不是浏览器发的）；它们都有自己的方式安排请求到的值（设置到data和设置到vuex）；其它的你再读读文档，争取多理解
-5- axios 的使用
-5-1- Nuxt 文档中说了，推荐用他们自己封装过的 axios 模块；如果要用 axios 官方的模块，一定要对 axios 进行封装，创建出 axios 实例，设置上拦截器什么的（大家都应该这么用的吧）；就用 Nuxt 封装过的吧
-5-2- vue 页面组件中使用 axios，mounted() / created() / methods
const data = await this.get('http://localhost:3000/user/list')
-5-3- asyncData() / fetch() 中
async asyncData({ axios.
axios }) {
let r = await get("http://localhost:3000/api/user/list");
}
-5-4- vuex 的 actions 中
let r = await this.get("http://localhost:3000/api/user/list");
-5-5- 抽取单独数据层的方式（api），我试了直接在 api 的模块中直接导入 '@nuxtjs/axios' 好像有点问题，如果大家有实验成功，麻烦下面留言下，多谢
// api 下的 user 模块中
export const getList = (axios.$get("http://localhost:3000/api/user/list")
// vuex 的 user 模块的 actions 中
import { getList } from '@/api/user'
// ...
let r = await getList(this.$axios)
更多细节，大家去看文档吧
网友评论