- 原文地址:Two less known facts about Vuex
- 原文做者:Alex Jover
- 译者:程序猿何大叔
特别声明:本文是做者 Alex Jover 发布在 VueDose 上的一个系列。html
版权归做者全部。vue
译者在翻译前已经和做者沟通获得了翻译整个系列的受权。react
为了避免影响你们阅读,得到受权的记录会放在本文的最后。git
这篇文章来自于一位很特别的受邀者:Nicolò Mezzopera,他是 Pulilab 网站的开发者,一位真大神。咱们去年还一块儿组织过一场在布达佩斯的关于 Vue.js 的 线下交流会!github
若是你今年 4 月 12 号恰好就在维罗纳,他恰好会在 Vue Day Italy 2019 会上发表演讲,这是你偶遇他的好机会哦 😉。vuex
介绍完了做者,咱们来进入主题。微信
当在咱们 Vue.js 的组件中使用了 Vuex,除了映射功能的函数以外,咱们好像忘记了它所暴露出来的其余有用的 API。less
咱们一块儿来看看能够利用它来干些什么。首先,仍是先来建立一个基本的 store:异步
const store = new Vuex.Store({
state: {
count: 0
},
getters: {
getCountPlusOne: state => state.count + 1
},
mutations: {
increment(state) {
state.count++;
}
}
});
复制代码
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 上查看例子。
有时候,与其监听 store 中的一个属性改变,不如使用 subscribeAction
方法订阅一个特定的 action,好比像 login
和 logout
之类的异步请求,这也是更有用的方案。
调用监听函数,在每个 action 分发的时候调用指定的回调函数,并在其中调用自定义代码。
咱们在每个 action 的分发前以及完成后,来分别开始和中止全局的 spinner。
const unsubscribe = store.subscribeAction({
before: (action, state) => {
startBigLoadingSpinner();
},
after: (action, state) => {
stoptBigLoadingSpinner();
}
});
// To unsubscribe:
unsubscribe();
复制代码
讲完啦!
你能够在线阅读这篇 原文,里面有可供复制粘贴的源代码。若是你喜欢这个系列的话,请分享给你的同事们!
此系列的其余文章,会同步系列官网的发布状况,及时地翻译发布到掘金。请持续关注「程序猿何大叔」,相信我会给你们带来更多优质的内容,不要忘了点赞~
若是想要了解译者的更多,请查阅以下:
以为本文不错的话,分享一下给小伙伴吧~