为Vuex添加同步Action

Otstar Lin

为什么要添加同步 Action?

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

添加同步 Action

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

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

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

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

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

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

结语

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