【译】Vue实用笔记（八）：Vuex的两个实用API

这个技巧呢来自于一个牛逼的Web开发者 Pulilab ，今年作者Alex与他还一起办了一个大会Vue.js meetup in Budapest 。

If you happen to be in Verona on April 12th, he’s giving a talk in the Vue Day Italy 2019. It can be your chance to meet him .

好了让我们进入正题（最近看《吐槽大会》，看到一个大张伟的圆规正传，拿来用一下）：

---

我们Vue中使用Vuex时，往往使用很多的辅助的mapping函数，但是忽略了其他暴露出来的很有魔力的API。
让我们一起看看都有谁，先创建一个基础的Vuex的使用例子。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    getCountPlusOne: state => state.count + 1
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

Watch

watch方法
这个API的最有用的地方是把Vuex和其他代码（React，Jquery）一起使用，他会出现在你的 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();

我们调用watchAPI时传给了它两个函数，第一个返回state和getters的我们关注的部分，第二个函数是个callbback函数，当第一个函数的返回值中的内容state.count 或者 getCountPlusOne 变化时会掉用该函数。

当和React、Angualr，甚至是JQuery一起使用时会非常有用。

代码.

SubscribeAction

有时候在一些特殊的Actions中监控store的响应式属性这个方法更有用，例如login 和 logout 这两个actions，Vuex提供了subscribeAction。

在每个Action执行后调用一个‘callback’，我们还可以自定义回掉的代码。
例如每个Ajax执行前显示loading，Ajax结束后隐藏loading：

const unsubscribe = store.subscribeAction({
  before: (action, state) => {
    startBigLoadingSpinner();
  },
  after: (action, state) => {
    stoptBigLoadingSpinner();
  }
});

// To unsubscribe:
unsubscribe();

Remember you can read this tip online (with copy/pasteable code), and don’t forget to share VueDose with your colleagues, so they also know about these tips as well!

See you next week.

Alex