- 原文地址：Two less known facts about Vuex
- 原文作者：Alex Jover
- 译者：程序猿何大叔
特别声明：本文是作者 Alex Jover 发布在 VueDose 上的一个系列。
版权归作者所有。
译者在翻译前已经和作者沟通得到了翻译整个系列的授权。
为了不影响大家阅读，获得授权的记录会放在本文的最后。
正文
这篇文章来自于一位很特别的受邀者：Nicolò Mezzopera，他是 Pulilab 网站的开发者，一位真大神。我们去年还一起组织过一场在布达佩斯的关于 Vue.js 的 线下交流会！
如果你今年 4 月 12 号刚好就在维罗纳，他刚好会在 Vue Day Italy 2019 会上发表演讲，这是你偶遇他的好机会哦 ?。
介绍完了作者，我们来进入主题。
当在我们 Vue.js 的组件中使用了 Vuex，除了映射功能的函数之外，我们好像忘记了它所暴露出来的其他有用的 API。
我们一起来看看可以利用它来干些什么。首先，还是先来创建一个基本的 store：
const store = new Vuex.Store({
state: {
count: 0
},
getters: {
getCountPlusOne: state => state.count + 1
},
mutations: {
increment(state) {
state.count++;
}
}
});
复制代码Watch 方法
watch 是将 Vuex 与其他外部代码整合的最有用的方法，可以在你的 awesomeService 或者是在 catchAllAuthUtils 等等类似的服务中使用。
使用示例：
const unsubscribe = store.watch(
(state, getters) => {
return [state.count, getters.getCountPlusOne];
},
watched => {
console.log("Count is:", watched[0]);
console.log("Count plus one is:", watched[1]);
},
{}
);
// To unsubscribe:
unsubscribe();
复制代码我们所做的就是在调用 vuex 的实例方法 watch 时，传入两个函数作为实参，第一个函数实参返回我们想要在 state 与/或 getters 上监听的属性；第二个函数实参是当属性值 state.count 或 getters.getCountPlusOne 有改变时，调用的回调函数。
这是用来结合 Vuex 与 react 或者 angular 甚至是 JQuery 代码时，非常有用的技巧。
可以在这个 CodeSandbox 上查看例子。
SubscribeAction 方法
有时候，与其监听 store 中的一个属性改变，不如使用 subscribeAction 方法订阅一个特定的 action，比如像 login 和 logout 之类的异步请求，这也是更有用的方案。
调用监听函数，在每一个 action 分发的时候调用指定的回调函数，并在其中调用自定义代码。
我们在每一个 action 的分发前以及完成后，来分别开始和停止全局的 spinner。
const unsubscribe = store.subscribeAction({
before: (action, state) => {
startBigLoadingSpinner();
},
after: (action, state) => {
stoptBigLoadingSpinner();
}
});
// To unsubscribe:
unsubscribe();
复制代码讲完啦！
你可以在线阅读这篇 原文，里面有可供复制粘贴的源代码。如果你喜欢这个系列的话，请分享给你的同事们！
结语
此系列的其他文章，会同步系列官网的发布情况，及时地翻译发布到掘金。请持续关注「程序猿何大叔」，相信我会给大家带来更多优质的内容，不要忘了点赞~
如果想要了解译者的更多，请查阅如下：
- 个人博客：blog.hadesz.com
- 个人 github 仓库：github.com/hadeshe93
- 个人微信公众号：搜索「程序猿何大叔」
请求翻译授权记录
觉得本文不错的话，分享一下给小伙伴吧~