实现一个vuex-loading插件

前言

在项目中，如何管理loading是一个很头疼的方式，有的是在请求封装里去做了一个全屏loading，有的是在单页面中管理一个loading，比如如下：

data(){
    return{
        loading:false
    }
},
methods:{
    async change(){
        this.loading = true
        // 执行异步操作
        await asyncAction()
        this.loading = false
    }    
}

如果管理的是一个还好，但是如果页面上存在着多个异步操作，维护起来简直要命。

之前有使用过dva这个基于react-saga的数据流框架，他有一个插件dva-loading非常的好用，但由于是React框架上的。一直想着如何借鉴其思路实现一个基于vuex的loading插件，是非常想做的一件事。

好在，vuex@3.1.0中新增了一个subscribeAction这个方法。

store.subscribeAction({
  before: (action, state) => {
    console.log(`before action ${action.type}`)
  },
  after: (action, state) => {
    console.log(`after action ${action.type}`)
  }
})

简单来说就是我们在发起的每一个action都可以在这个方法中订阅到，before和after两个过程。心里一想，这岂不是跟dva-loading有一样的一个动作吗。

如何实现

先看一下dva-loading的源码，分析一下：

为了方便描述，直接贴源码补充注释，具体dva的使用与vuex的异同，可以看我之前写的那篇如何使用dva与服务端进行数据交互

const SHOW = '@@DVA_LOADING/SHOW'; // 定义reducer 类似于mutation
const HIDE = '@@DVA_LOADING/HIDE';
const NAMESPACE = 'loading';  // 定义命名空间

function createLoading(opts = {}) {
  // 获取参数中的命名空间或者本地的名称
  const namespace = opts.namespace || NAMESPACE;

  const { only = [], except = [] } = opts;
  if (only.length > 0 && except.length > 0) {
    throw Error('It is ambiguous to configurate `only` and `except` items at the same time.');
  }

  // 初始化state
  const initialState = {
    global: false, // 定义全局 loading 
    models: {}, // 定义模块
    effects: {}, // 定义effect 异步操作
  };

  const extraReducers = {
    [namespace](state = initialState, { type, payload }) {
      const { namespace, actionType } = payload || {};
      let ret;
      switch (type) {
        // 如果是显示的话 将全局loading置为true 
        // 并且将本model中所有的loading都置为 true
        case SHOW:
          ret = {
            ...state,
            global: true,
            models: { ...state.models, [namespace]: true },
            effects: { ...state.effects, [actionType]: true },
          };
          break;
        // 如果是显示的话 将本模块的都置为false
        case HIDE: {
          const effects = { ...state.effects, [actionType]: false };
          // 遍历操作将所有的都置为false
          const models = {
            ...state.models,
            [namespace]: Object.keys(effects).some(actionType => {
              const _namespace = actionType.split('/')[0];
              if (_namespace !== namespace) return false;
              return effects[actionType];
            }),
          };
          // 遍历所有的model 将所有命名空间中的都置为false
          const global = Object.keys(models).some(namespace => {
            return models[namespace];
          });
          ret = {
            ...state,
            global,
            models,
            effects,
          };
          break;
        }
        default:
          ret = state;
          break;
      }
      // 最后返回到state中 成功修改了store state中的数据
      return ret;
    },
  };

  // 发起异步操作
  function onEffect(effect, { put }, model, actionType) {
    const { namespace } = model;
    if (
      (only.length === 0 && except.length === 0) ||
      (only.length > 0 && only.indexOf(actionType) !== -1) ||
      (except.length > 0 && except.indexOf(actionType) === -1)
    ) {
      return function*(...args) {
        // 用了generator做异步处理
        // 发起一个同步操作 传入命名空间与异步操作type
        yield put({ type: SHOW, payload: { namespace, actionType } });
        // 具体执行的异步操作
        yield effect(...args);
        yield put({ type: HIDE, payload: { namespace, actionType } });
      };
    } else {
      return effect;
    }
  }

  return {
    extraReducers,
    onEffect,
  };
}

export default createLoading;

模仿dva-loading开始动手实现

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的时候注册一个模块进去
    store.registerModule(namespace, {
      namespaced: true,
      state: {
        global: false, // 定义全局loading
        effects: {}
      },
      // 同步方法
      mutations: {
        SHOW(state, { payload }) {
          state.global = true;
          state.effects = {
            ...state.effects,
            [payload]: true // 将当前的action 置为true
          };
        },
        HIDE(state, { payload }) {
          state.global = false;
          state.effects = {
            ...state.effects,
            [payload]: false // 将当前的action 置为false
          };
        }
      }
    });

    store.subscribeAction({
      // 发起一个action 之前会走这里
      before: action => {
        console.log(`before action ${action.type}`);
        if (onEffect(action, includes, excludes)) {
          store.commit({ type: SHOW, payload: action.type });
        }
      },
      // 发起一个action 之后会走这里
      after: action => {
        console.log(`after action ${action.type}`);
        if (onEffect(action, includes, excludes)) {
          store.commit({ type: HIDE, payload: action.type });
        }
      }
    });
  };
};

// 判断是否要执行
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;

使用

• 在dva中是这样使用的

@connect(({loading})=>({
    loading:loading.effects['user/addAction']
}))

• vuex中是这样使用的

import { mapState } from "vuex";

  computed: {
    ...mapState({
      loading: state => state["@@LOADING"].effects["user/addAction"]
    })
  },

两者相同的都是在effects[]这个数组中取key为我们要执行的那个异步操作的type这样就能获取到他的loading状态

因为在两者的全局loading模块中,有一个effects对象数组，结构类似于这样

state = {
    effects:[
        {'user/addAction':true},
        {'user/updateAction':false},
    ]
}

好了这下可以愉快的在页面中使用loading了。对了差点忘记，还要去注册插件

import createLoadingPlugin from "@/utils/vuex-loading";

export default new Vuex.Store({
  plugins: [createLoadingPlugin()],
  state: {},
  mutations: {},
  actions: {},
  modules
});

特别注意的是，因为是基于subscribeAction这个方法实现的，所以需要将vuex版本升级至3.1.0+

关于

• 借鉴dva-loading
• 本文首发于实现一个vuex-loading插件