本文章个人观点仅供参考. 如果有更好的方式方法, 欢迎交流.
文件目录
- -- src
- |_ API
- | |_ index.JS
- | |_ http.JS // 定义 axios 实例
- | |_ server
- | |_ user.JS // 定义接口文档
- | |_ shop.JS // 定义接口文档
- |_ store
- | |_ getters.JS
- | |_ action.JS
- | |_ moutation
- | |_ state.JS
- |_ main.JS
- |_ router.JS
- |_ store.JS
- ...
- -- .env.development // 本地环境配置
- -- .env.production // 生产环境配置
- -- package.JSON
- -- vue.config.JS
- 1. /src/API/http.JS
- import axios from 'axios';
- import qs from 'qs';
- import { Toast } from 'vant';
- let instance = axios.create({
- timeout: 60000,
- })
- instance.interceptors.request.use(req => {
- return req;
- })
- instance.interceptors.response.use(({ data })=> {
- if (data.code != 200) { // 这个不是 res.code, 而是后端人员自定义的, 根据自己项目实际情况来决定
- Toast({
- message: data.msg,
- timeout: 1500,
- icon: 'fail',
- })
- }
- return data
- }, err => {
- Toast({
- message: ` 请求失败: 错误信息 \n${err.message}`
- timeout: 1500,
- })
- })
- export default (method, url, data = null) => {
- method = method.toLowerCase();
- if (method == 'post') {
- return instance.post(url, qs.stringify(data))
- }else if (method == 'get') {
- return instance.get(url, {params: data})
- }
- }
- 2. /src/API/server/user.JS
- module.exports = {
- newMember: {
- url: '/wx/newMember',
- method: 'get',
- },
- getMemberByWx: {
- url: '/wx/getMemberByWx',
- method: 'get',
- },
- }
- 3. /src/API/server/shop.JS
- module.exports = {
- getAllShopCarProduct: {
- url: head + '/getAllShopCarProduct',
- method: 'get',
- },
- addShopCar: {
- url: head + '/addShopCar',
- method: 'post',
- },
- }
- 4. /src/API/index.JS
- import req from './http.js'
- const context = require.context('@/apis/server/', true, /\.JS$/);
- let urlObj = {}, getUrl = {};
- context.keys().forEach(url => {
- let name = url.split('/').slice(1)[0].split('.')[0];
- Object.assign(urlObj, require(`@/apis/server/${name}`))
- })
- let head = url => process.env.VUE_APP_HOST + url;
- for (let key in urlObj) {
- let item = urlObj[key];
- Object.assign(getUrl, {[key]: (params = {}) => req(item.method, head(item.url), params)})
- }
- export default getUrl
- 5. /src/store/action.JS
- import getUrl from '@/api/index'
- let httpData = {};
- for (let key in getUrl) {
- httpData[key] = async ({ commit }, params = {}) => await getUrl[key](params)
- }
- export default {
- ...httpData
- }
- 6. /src/store.JS
- import Vue from 'vue'
- import Vuex from 'vuex'
- import actions from '@/store/action'
- import mutations from '@/store/mutations'
- import getters from '@/store/getters'
- import state from '@/store/state'
- Vue.use(Vuex)
- const store = new Vuex.Store({
- mutations,
- actions,
- getters,
- state,
- })
- export default store
- 7. .env.development
- VUE_APP_HOST=/apis
- 8. .env.production
- NODE_ENV=production
- VUE_APP_HOST=http://0.0.0.0:8080
- 9. package.JSON
- {
- "scripts": {
- "dev": "vue-cli-service serve",
- "build": "vue-cli-service build --mode production",
- },
- }
10. vue.config.JS
- module.exports = {
- // 反向代理配置
- devServer: {
- proxy: {
- '/apis': {
- target: 'http://1.1.1.1:8090',
- changeOrigin: true,
- pathRewrite: {
- '^/apis': ''
- },
- }
- }
- },
- }
使用方法
方法一
- import { mapActions } from 'vuex'
- export default {
- mounted() {
- this.addshopcar()
- },
- methods: {
- ...mapActions([
- 'addShopCar'
- ]),
- addshopcar() {
- let params = {
- productId: 'p10086'
- }
- this.addShopCar(params).then(data => {
- // 返回数据进行处理
- })
- }
- }
- }
方法二
- import { mapActions } from 'vuex'
- export default {
- mounted() {
- this.newMember().then(this.newmember)
- },
- methods: {
- ...mapActions([
- 'newMember'
- ]),
- newmember(data) {
- // 返回数据进行处理
- }
- }
- }
方法三
- export default {
- mounted() {
- this.addshopcar()
- },
- methods: {
- addshopcar() {
- this.$store.dispatch('addShopCar', {productId: 'p10086'}).then(data => {
- // 返回数据进行处理
- })
- }
- }
- }
希望对刚入行的同学提供一点点思路.
来源: http://www.jianshu.com/p/b7f3f51094a8