借鑒1 https://www.ahwgs.cn/vuex-loading-plugin.html
借鑒2http://www.itdecent.cn/p/82b34a22f3af

這個(gè)版本問題如下：

• 使用了 子模塊，但是實(shí)現(xiàn)代碼哪里沒有用子模塊的方法調(diào)用，導(dǎo)致程序不能運(yùn)行

      // 原來調(diào)用方式
      store.commit({
          type: `${HIDE}`,
          payload: action.type
      });
      
      
      // 可以修改成
      store.commit({
          type: `${namespace}/${HIDE}`,
          payload: action.type
      });
      
      // 或者
      namespaced: false,
      
  

• global 多個(gè)action運(yùn)行時(shí)，只要有一個(gè)執(zhí)行完畢就true，這樣不合理
• mutations 定義出錯(cuò)，具體看下面代碼了（懶癌范了）

完整代碼如下

/**
 * vuex 仿 dva-loading
 * 注意測(cè)試action不能直接用setTimeout，要返回一個(gè)帶Promise的timeout才可以
 * @type {string}
 */

const NAMESPACE = "loading"; // 定義模塊名
const SHOW = "@@LOADING/SHOW" // 顯示mutation 同步type
const HIDE = "@@LOADING/HIDE"


const createLoadingPlugin = ({
    namespace = NAMESPACE,
    includes = [],
    excludes = []
} = {}) => {
    return store => {
        if (store.state[namespace]) {
            throw new Error(
                `createLoadingPlugin: ${namespace} exited in current store`
            );
        }


        // new vuex的時(shí)候注冊(cè)一個(gè)模塊進(jìn)去
        store.registerModule(namespace, {
            namespaced: false,
            state: {
                global: false, // 定義全局loading
                effects: {}
            },
            // 同步方法
            mutations: {
                [SHOW](state, {
                    payload
                }) {
                    state.global = true;
                    state.effects = {
                        ...state.effects,
                        [payload]: true // 將當(dāng)前的action 置為true
                    };

                    console.log('==SHOW==================');
                    console.log('state\n');
                    console.log(JSON.stringify(state, null, '\t'));
                    console.log('========================');
                },
                [HIDE](state, {
                    payload
                }) {
                    state.effects = {
                        ...state.effects,
                        [payload]: false // 將當(dāng)前的action 置為false
                    };
                    // 遍歷所有的model 將所有命名空間中的都置為false
                    const global = Object.keys(state.effects).some(effectKey => {
                        return state.effects[effectKey];
                    });
                    state.global = global;
                    console.log('==HIDE==================');
                    console.log('state\n');
                    console.log(JSON.stringify(state, null, '\t'));
                    console.log('========================');
                }
            }
        });


        store.subscribeAction({
            // 發(fā)起一個(gè)action 之前會(huì)走這里
            before: (action, state) => {
                console.log(`before action ${action.type}`);
                if (onEffect(action, includes, excludes)) {
                    store.commit({
                        type: `${SHOW}`,
                        payload: action.type
                    });
                }
            },
            // 發(fā)起一個(gè)action 之后會(huì)走這里
            after: (action, state) => {
                console.log(`after action ${action.type}`);
                if (onEffect(action, includes, excludes)) {
                    store.commit({
                        type: `${HIDE}`,
                        payload: action.type
                    });
                }
            }
        });
    };
};

// 判斷是否要執(zhí)行
function onEffect({
    type
}, includes, excludes) {
    if (includes.length === 0 && excludes.length === 0) {
        return true;
    }

    if (includes.length > 0) {
        return includes.indexOf(type) > -1;
    }

    return excludes.length > 0 && excludes.indexOf(type) === -1;
}

export default createLoadingPlugin;