网上找了一下nuxt使用axios,发现都写的不是很全面,这里把我整理好的,记录下来。致力于帮助有缘人
第一步:安装axios,虽然我在创建项目的时候选择了axios,但是用的时候发现好像并没有
npm i @nuxtjs/axios
第二步:配置nuxt.config.js (下面的代码你只需要把prefix改成你的后台访问前缀就好了)
modules: [
'@nuxtjs/axios',
],
axios: {
prefix: 'http://127.0.0.1:8100/api/',
proxy: true
},
proxy: {
'/api/': {
target: 'http://127.0.0.1:8100/',
pathRewrite: {
'^/api/': ''
}
}
},
第三步:在组件中使用
1、非ssr使用,方法使用
save(){
this.$axios.post("blogCatg/add")
.then((res) => {
console.log(res)
})
}
ssr使用,在组件初始化之前去访问
async asyncData({ $axios }) {
$axios.post('blogCatg/add')
.then((res) => {
console.log(res)
})
},
对ssr使用的一个补充
如果,你想获取路由中的参数,或者想获取vuex中的数据怎么做呢?
把上面的方法改成这样的
这个context就是一个上下文对象,打印看一下
你可以通过context这个上下文对象,取出你想要的任何数据