【前端筆記】Vuex 是什麼，為什麼需要

樑仔發表於2019-01-18

Vuex 十分簡單好用，沒用過難免會有神祕感，以致於往往就高估了其使用難度，其實也就那麼回事，沒什麼高大上的。

Vuex 是什麼

Vuex 是專門為 Vue.js 設計的狀態管理庫，它採用集中式儲存管理應用的所有元件的狀態。

狀態管理是什麼

狀態管理並不是什麼神奇的概念，其實你一直都在做，即便你從來沒了解過狀態管理的概念。

我們先看文件裡的示例，一個 Vue 計數應用：

new Vue({
  // state
  data() {
    return {
      count: 0
    };
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment() {
      this.count++;
    }
  }
});
複製程式碼

這個應用包含以下幾個部分：

state，驅動應用的資料來源；
view，以宣告方式將 state 對映到檢視；
actions，響應在 view 上的使用者輸入導致的狀態變化。

這是一個狀態自管理應用，狀態自管理？可以這樣理解，state，view，action，三部分都寫在了元件內，狀態由應用元件各自管理，即自己的狀態自己管理。

而我們常說的狀態管理，往往是指外部管理，目的是對狀態和元件進行分離，具體到 Vuex 裡的表現就是：把應用的所有元件的狀態抽取出來，以一個全域性單例模式在應用外部採用集中式儲存管理。

看來，狀態管理並不是新鮮的東西，不過就是把內部對 state 部分的操作，都拿到外部去罷了，事實也確實如此。

為什麼需要狀態管理

很多人最初喜歡用 Vue，React 這類框架，大概都是因為框架的響應式特性——當資料改變時，檢視會進行重新渲染。這其實正是框架解決的最核心的問題。

1. view 顯示了 state
2. 使用者在 view 上操作，會觸發 action 去改變 state
3. state 的改變，導致 view 層再渲染

有沒有發現一個有趣的問題，在這個單向流動的過程中，

步驟 1 和步驟 3 已經由 Vue 的響應式特性來做了，我們並不關心其實現細節。
步驟 2 是我們參與的地方，這正是狀態管理的部分。

既然我們並不關心 view 層是如何自動渲染的，為什麼我們不把狀態管理和 view 層的程式碼分離開，分開的好處顯而易見，比如我們可以隨時換掉 view 層的實現，而不用修改狀態管理部分的任何程式碼，這個理由足夠讓我們單獨對狀態進行管理。

為什麼需要 Vuex

對於簡單的狀態管理，一個簡單的 store 模式就足夠了，官方示例：

var store = {
  debug: true,
  state: {
    message: "Hello!"
  },
  setMessageAction(newValue) {
    if (this.debug) console.log("setMessageAction triggered with", newValue);
    this.state.message = newValue;
  },
  clearMessageAction() {
    if (this.debug) console.log("clearMessageAction triggered");
    this.state.message = "";
  }
};

var vmA = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
});

var vmB = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
});
複製程式碼

所有 store 中 state 的改變，都放置在 store 自身的 action 中去管理。這種集中式狀態管理能夠被更容易地理解哪種型別的 mutation 將會發生，以及它們是如何被觸發。當錯誤出現時，我們現在也會有一個 log 記錄 bug 之前發生了什麼。
此外，每個例項/元件仍然可以擁有和管理自己的私有狀態：