为什么要添加同步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
本文地址: 为Vuex添加同步Action