Nuxt 有官方 axios 模块,该模块自动处理 cookie,将客户端 cookie 传递到服务端。
一、安装
在项目目录使用 npm 命令进行安装:
npm install @nuxtjs/axios --save
或者手动在 package.json 文件中添加依赖,然后执行“npm install”命令进行安装:
{
"dependencies": {
"@nuxtjs/axios": "^5.3.4",
"axios": "^0.18.0",
"express": "^4.15.3",
"nuxt-edge": "^2.0.0-25579690.716c04f"
}
}
二、配置
在 nuxt.config.js 文件里添加 axios 配置:
module.exports = {
modules: [
'@nuxtjs/axios',
]
}
三、使用
1、组件
1)asyncData 方法中的使用
async asyncData({ app }) {
const ip = await app.$axios.$get('http://localhost:3000')
return { ip }
}
2)methods、created、mounted 等中的使用
methods: {
async fetchSomething() {
const ip = await this.$axios.$get('http://localhost:3000')
this.ip = ip
}
}
2、Store
1)nuxtServerInit 中的使用
async nuxtServerInit ({ commit }, { app }) {
const ip = await this.$axios.$get('http://localhost:3000')
commit('SET_IP', ip)
}
2)actions 中的使用
// In store
{
actions: {
async getIP ({ commit }) {
const ip = await this.$axios.$get('http://localhost:3000')
commit('SET_IP', ip)
}
}
}