[聚合文章] Damer-cli：帮你优化HTTP请求结构的脚手架

==写在前面== ：最近一直在用 Vue 做后台管理系统。大家也都知道这种后台管理系统，用组件库的话很快就能搭出一个像样的界面出来，但是他的请求远比单页面复杂得多，逻辑也更复杂一点。http请求有一个清晰的结构不仅有利于开发，也有利别人接手，本篇文章就是给大家分享一些优化的方法，第一次写文章，如果有的地方写的不对或是没有表达清楚，欢迎大家给我提 issues

代码结构就不展示了，大家可以去 这里 查看，本篇文章主要给大家分享一下其中的 api 和 store

• api

1. urlConfig.js

// 在这个页面中，将后台的请求集合起来，统一管理
(function() {
    var BASE_URL = window.oPageConfig.oData.BASE_URL;

    function URLConfig(which, data) {
        var url;
        switch (which) {
            /*********************基础信息*********************/
            case 'baseInfo':
                return BASE_URL + 'info'; // 菜单列表
        }
    }
    window.URLConfig = URLConfig;
})();

2. index.js

import http from './http.js';
import urlConfig from './urlConfig.js';
//在这里注册 HTTP请求
export function getBaseInfo (){
    return http({url: URLConfig('baseInfo')});
}

3. 引用

import * as Api from 'api/index.js'

---

methods: {
  loadData: function() {
    Api.getBaseInfo().then((data)=>{
        // todo
    }, error=>{
        //todo
    })
  }
},

这种方式的好处在于统一管理HTTP请求，便于维护和修改，比如后台进行了修改接口地址或是增加删除参数之类的操作，我们就只要在 api 中进行修改就可以了。 同样，在多个页面用到同一个请求也只需要更改一下参数就可以了。

• store

vuex的使用方法不用多说，这里主要是将公共方法抽取出来，放到actions中去，具体操作如下：

import testA from './testA.js';
import testB from './testB.js';
import * as Api from 'src/api';

const state = {};

const getters = {};

const actions = {
    //在这里将公共的操作提取出来，对公共的数据进行统一的操作
    //获取信息
    loadBaseInfo({ dispatch, commit }, params) {
        return new Promise((resolve, reject) => {
            Api.getBaseInfo(params).then(data => {
                commit('UPDATE_BASEINFO', data.list);
                resolve(data);
            }, error => {
                reject(error);
            });
        })
    }
};

const mutations = {
    UPDATE_BASEINFO(state, data) {
        //todo
    }
};

export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations,
    modules: {
        testA,
        testB,
    }
}

使用

import { mapState, mapMutations, mapActions } from "vuex";

computed: {
    ...mapState("modules/testA", {
      变量名: state => state.变量名,
    }),
    ...mapState("modules/testB", {
      变量名: state => state.变量名,
    })
},
methods: {
    //注意这里的modules是指引用在index.js中的父组件的模块名称
    /*例如
    *在store/index.js中
    *  " import baseModule from './modules/base.js'; "
    *那么下面的引用路径就要变成("baseModule/testA");
    */
    ...mapActions("modules/testA", [
      "方法名"
    ]),
     ...mapActions("modules/testB", [
      "方法名"
    ]),
    ...mapMutations("modules/testA", [
      "方法名"
    ]),
    ...mapMutations("modules/testB", [
      "方法名"
    ]),

注意：

对于一个组件拥有多个组件，同时各组件之间有数据联系的情况，可以通过为每个组件都建立一个store文件，然后在父组件中引用的方式解决，当然，在子文件中都需要加上 ==namespaced: true==

这种方式的好处在于数据处理的操作全在vuex中进行，组件只负责渲染，代码逻辑都在一个地方，降低了别人熟悉你的代码的难度，同样也有利于维护

写在最后： 我目前的处理方式就是两者相结合，在api中注册所有的请求接口，对于不复杂的界面直接引用 api，复杂的组件就抽离出来，在store中处理。这是我最近工作的一点心得，把它写出来希望能为不知道的小伙伴提供一点帮助，知道这种方法的大神们，如果有更好的处理方式又方便分享的话，欢迎到 issues 中来。同样，如果这篇文章有什么问题的话也请移步 这里 。

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。