【譯】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
• 我的微信公衆號：搜索「程序猿何大叔」

請求翻譯受權記錄

---

以爲本文不錯的話，分享一下給小夥伴吧~