【譯】Vue 的小奇技（第八篇）：兩個鮮有人知的 Vuex 技巧

程式猿何大叔發表於2019-03-06

Vue

原文地址：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();
複製程式碼

講完啦！

你可以線上閱讀這篇原文，裡面有可供複製貼上的原始碼。如果你喜歡這個系列的話，請分享給你的同事們！