网上找了一下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这个上下文对象,取出你想要的任何数据



另外附上:nuxt使用axios的文档:https://axios.nuxtjs.org/