(1)cd到项目下,执行命令:$ npm i axios --save
(2)新建文件api/helpers.js内容如下:
// 1、导入axios
import axios from 'axios'
const urlMap = {
development: '/',
production: 'http://ustbhuangyi.com/sell/'
}
const baseUrl = urlMap[process.env.NODE_ENV]
const ERR_OK = 0
// 2、编写get方法:
export function get(url) {
return function(params = {}) {
return axios.get(baseUrl + url, {
params
}).then((res) => {
const {errno, data} = res.data
if (errno === ERR_OK) {
return data
}
}).catch((e) => {
})
}
}
(3)新建文件api/index.js内容如下:
// 1、导出get()方法:
import { get } from './helpers'
// 2、调用get()方法,返回值也是一个函数,看一眼上述get()方法是如何定义的,这样定义的好处,便于再次传值调用:
const getSeller = get('api/seller')
// 3、导出getSeller()函数,这样导出后的函数,就能在其他组件中任意使用了
export {
getSeller,
}
(4)例如在App.vue组件中调用getSeller()函数:
<template>
<div id="app">
// 4、向子组件传值(父组件向子组件传值)
<v-header :seller="seller"></v-header>
</div>
</template>
<script>
import VHeader from 'components/v-header/v-header'
// 1、组件中导入getSeller方法,待使用
import { getSeller } from 'src/api'
export default {
name: 'app',
data() {
return {
seller: {}
}
},
created() {
// 2、在调接口的地方。调用getSeller()方法,获取返回值
getSeller().then((seller)=> {
// 3、给变量赋值
this.seller = seller
})
},
components: {
VHeader
}
}
</script>
<style lang="stylus">
</style>