【译】Vue 的小奇技（第八篇）：两个鲜有人知的 Vuex 技巧

• 原文地址：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
• 我的微信公众号：搜索「程序猿何大叔」

请求翻译受权记录

---

以为本文不错的话，分享一下给小伙伴吧~