为Vuex添加同步Action

为什么要添加同步Action？

在某些操作中，如获取内存中的数据时，需要立即返回对应的值，而Vuex的Action规定了只能返回一个Promise，这时，如果我们想获取返回值就需要使用then或者await，代码就会变得不直观，而如果触发Mutation再从State获取值也是同理，所以如何能让Action不是异步的又能保持和Vuex的Action拥有一样的功能呢？

添加同步Action

首先我们先看看Vuex的Action的结构是如何的：

const actions = {
  asyncAction (context, data) {
    // do soming...
  }
}

可以看到，action中传入了context和data，所以我们添加的同步action也需要增加这两个参数，同时将store绑定到action的this。

const actions = {
  asyncAction (context, data) {
    // do soming...
  }
}

export const syncActions = {   // 同时导出，以便后续的操作
    syncActin(context, data) {
        // do soming...
        return val;
    }
}

//...

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
};

在index.js导入对应的模块和同步actions对象，同时导出修改过的同步action，用于mapSyncActions，并为每个同步action绑定this和注入参数。

import note, { syncActions as syncNote } from './modules/note';
import { dispatchSync } from './syncActions';

export const syncActions = {
  note: syncNote
};

for (const nKey in syncActions) {
  let getters = {};
  for (const gKey of Object.keys(store.getters)) {
    let k = gKey.split('/');
    if (k[0] === nKey) {
      Object.defineProperty(getters, k[1], {
        get() {
          return store.getters[gKey];
        }
      });
    }
  }
  for (const iKey in syncActions[nKey]) {
    syncActions[nKey][iKey] = syncActions[nKey][iKey].bind(store, {
      state: store.state[nKey],
      rootState: store.state,
      commit: function(type, payload = null, options = null) {
        store.commit(nKey + '/' + type, payload, options);
      }.bind(store),
      dispatch: function(type, payload = null, options = { root: false }) {
        let t = options.root ? type : nKey + '/' + type;
        return store.dispatch(t, payload);
      }.bind(store),
      dispatchSync: function(type, payload = null, options = { root: false }) {
        let t = options.root ? type : nKey + '/' + type;
        return dispatchSync(t, payload);
      }.bind(store),
      rootGetters: store.getters,
      getters: getters
    });
  }
}

store.syncActions = syncActions;
store.dispatchSync = dispatchSync;

然后，我们还要实现对应的dispatch方法和mapActions方法，来实现调用该action，在index.js同级文件夹下添加一个syncActions.js

import { syncActions } from './index';

function addMethod(object, name, fn) {
  var old = object[name];
  object[name] = function() {
    if (fn.length === arguments.length) {
      return fn.apply(this, arguments);
    } else if (typeof old === 'function') {
      return old.apply(this, arguments);
    }
  };
}

const mod = {};

addMethod(mod, 'mapSyncActions', map => {
  let fn = {};
  let namespace = '';
  let action = '';
  for (let i = 0; i < map.length; i++) {
    [namespace, action] = map[i].split('/');
    if (syncActions[namespace]) {
      fn[action] = syncActions[namespace][action];
    }
  }
  return fn;
});

addMethod(mod, 'mapSyncActions', (namespace, map) => {
  let fn = {};
  for (let i = 0; i < map.length; i++) {
    if (syncActions[namespace]) {
      fn[map[i]] = syncActions[namespace][map[i]];
    }
  }
  return fn;
});

export const mapSyncActions = mod.mapSyncActions;
export function dispatchSync(type, payload = null) {
  let namespace = '';
  let action = '';
  [namespace, action] = type.split('/');
  if (syncActions[namespace]) {
    return syncActions[namespace][action](payload);
  }
}

如果要在Vuex模块中使用，只需要导入syncActions.js然后同Vuex的action调用一样即可。

import { dispatchSync } from '../syncActions';

let info = dispatchSync(
    'note/listOperate',
    {
      operate: 'get',
      storage: storage,
      path: path
    }
);

若要在组件中使用，只需要同mapActions一样使用mapSyncActions即可，或者使用dispatchSync。

import { mapSyncActions } from "./store/syncActions";

export default {
    methods: {
        ...mapSyncActions("note", ["listOperate"]),
        fun() {
            this.$store.dispatchSync('note/listOperate');
        }
    }
}

结语

说实在搞这个其实没啥用，因为用到的机会其实也很小，只是当初我把XK-Note重构到Vuex时，不想修改太多的代码逻辑搞出来的，本文的实例具体可以查看XK-Note。

声明: 本文采用 BY-NC-SA 协议进行授权，如无注明均为原创，转载请注明转自青空之蓝
本文地址: 为Vuex添加同步Action