Vue的一些API理解整理，如何一次引入多次调用

在我们做vue项目时通常会创一个config文件夹，里面一般会包含 api.js和index.js，其中api.js一般用于存放一些url地址，例如

let base = 'http://192.168.1.110:8081/hhdj/'
export default {
  login: `${base}login/login.do`,
  codeUrl: `${base}validatecode.jsp`,
  newsList: `${base}news/newsList.do`
}

或者这样写

const serverUrl = 'http://www.fooju.cn/fjw/api.php?'
export default {
  serverUrl: 'http://www.fooju.cn/',
  map: 'http://online0.map.bdimg.com/tile/?qt=tile',
  login: serverUrl + 's=Login/login', /* 登录 */
  register: serverUrl + 's=Login/register', /* 注册 */

对于index.js文件里面存放的是将数据发送给服务端的一些处理，例如

import api from './api'
import axios from 'axios'
axios.defaults.withCredentials = true
let qs = require('qs')

export const login = data => {
  console.log('login api')
  return axios.post(api.login, qs.stringify(data))
}
export const codeUrl = api.codeUrl
export const getNews = data => {
  return axios.get(api.newsList, {params: data})
}

或者

import api from './api'
import axios from 'axios'
var qs = require('qs')
axios.defaults.withCredentials = true

export const getNewsList = params => {
  return axios.get (config.getNewsList, {params: params})
}
export const saveNews = formdata => {
  return axios.post (config.saveNews, formdata)
}
function createPostParams (obj) {
  return qs.stringify(obj)
}
export const login = data => {
  return axios.post (config.login, qs.stringify(data))
} 

对于index.js文件中export输出的方法，我们可以在main.js中一次性引入，然后在vue中的文件通过this.$api.XXX()调用，例如

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import * as api from './config'
／／这里需要注意的是路径只写到相应的文件夹下面即可
import mycom from './components/index'
import store from './store/store'
Vue.prototype.$api = api
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(mycom)
Vue.test = function () {
  alert()
}
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store:store,
  template: '<App/>',
  components: { App }
})

在不用的vue文件中调用方法为，

<template>
  <div>
    <el-input v-model="user.username"></el-input>
    <el-input v-model="user.password"></el-input>
    <el-input v-model="user.checkcode"></el-input>
    <img :src="codeurl" alt="">
    <el-button type="sucess" @click="loginUser">提交</el-button>
   <!-- <a href="#/demo/111">111</a>
    <a href="#/demo/222">222</a>-->
    <router-link to="/demo/222">2222</router-link>
    <router-link to="/demo/111">1111</router-link>
  </div>
</template>

<script>
  export default{
    data () {
      return {
        user: {
          username: '',
          password: '',
          checkcode: ''
        },
        codeurl: ''
      }
    },
    methods: {
      loginUser () {
        this.$store.commit('setUser',this.user)
        this.$router.push('/demo/11')
        /*this.$api.login(this.user).then(function (res) {
          console.log(res.data)
        })*/这里是调用不同方法的地方this.$api.login()
      }
    }
  }
</script>

<style scoped>

</style>

http://blog.csdn.net/heliumlau/article/details/70182966