译者: 程序猿何大叔 https://github.com/hadeshe93
特别声明: 本文是作者 Alex Jover https://twitter.com/alexjoverm 发布在 vueDose https://vuedose.tips 上的一个系列.
版权归作者所有.
译者在翻译前已经和作者沟通得到了翻译整个系列的授权.
为了不影响大家阅读, 获得授权的记录会放在本文的最后.
正文
这篇文章来自于一位很特别的受邀者: Nicolò Mezzopera https://twitter.com/DonNicoJs , 他是 Pulilab http://www.pulilab.com/ 网站的开发者, 一位真大神. 我们去年还一起组织过一场在布达佩斯的关于 vue.js 的 线下交流会!
如果你今年 4 月 12 号刚好就在维罗纳, 他刚好会在 Vue Day Italy 2019 https://2019.vueday.it/talks.html#nicolo-mezzopera 会上发表演讲, 这是你偶遇他的好机会哦 .
介绍完了作者, 我们来进入主题.
当在我们 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 https://codesandbox.io/s/vm6r05qjq0 上查看例子.
SubscribeAction 方法
有时候, 与其监听 store 中的一个属性改变, 不如使用 subscribeAction 方法订阅一个特定的 action, 比如像 login 和 logout 之类的异步请求, 这也是更有用的方案.
调用监听函数, 在每一个 action 分发的时候调用指定的回调函数, 并在其中调用自定义代码.
我们在每一个 action 的分发前以及完成后, 来分别开始和停止全局的 spinner.
- const unsubscribe = store.subscribeAction({
- before: (action, state) => {
- startBigLoadingSpinner();
- },
- after: (action, state) => {
- stoptBigLoadingSpinner();
- }
- });
- // To unsubscribe:
- unsubscribe();
讲完啦!
你可以在线阅读这篇 原文 https://vuedose.tips/tips/8/ , 里面有可供复制粘贴的源代码. 如果你喜欢这个系列的话, 请分享给你的同事们!
结语
此系列的其他文章, 会同步系列官网的发布情况, 及时地翻译发布到掘金. 请持续关注「程序猿何大叔」, 相信我会给大家带来更多优质的内容, 不要忘了点赞~
如果想要了解译者的更多, 请查阅如下:
个人博客: https://blog.hadesz.com
个人 GitHub 仓库: https://github.com/hadeshe93
个人微信公众号: 搜索「程序猿何大叔」
请求翻译授权记录
觉得本文不错的话, 分享一下给小伙伴吧~
来源: https://juejin.im/post/5c7f20a46fb9a049db73e3d8