挑戰全網最幽默的Vuex系列教程：第一講 Vuex究竟是什麼鬼

先說兩句

官方已經有教程了，爲何還要寫這個教程呢？說實話，還真不是我閒着蛋疼，官方的教程真的是太官方了，對於剛入門 Vuex 的童鞋來講，想必看官方的教程，不少地方就如同看聖經同樣，好比「歐瑪尼瑪尼牙」，全部的字都認識，就是不知道說些什麼玩意，不信，你能夠戳進去看看。

固然，對於大神級別一看就懂的，那就不用說了，確定是看官方的更權威。還有，若是對 Flux、Redux、The Elm Architecture 比較熟悉的話，也能夠移步官方，由於官方也說了，Vuex 的套路基本上都是從那邊吸收整合後，過渡而來的，只不過，Vuex 只鍾情於 Vue.js 罷了。

我之因此寫這個教程，主要是由於本身剛剛開始和 Vuex 打交道的時候，痛過了、苦過了、傷過了，因此痛定思痛，爲了能讓本身更好的駕馭 Vuex，也爲了避免讓新來的童鞋們被 Vuex 調戲事後無處訴苦，因此方纔決定把官方的這些抽象的文字和概念，用連你身後的鼓勵師小姐姐都能看懂的語言，分享出來，助你在前端的道路上越走越順，順利的找到一份有鼓勵師陪伴的工做。

再說一句

Vuex 是 Vue.js 的座駕，因此，若是還不懂Vue.js 的話，那仍是先把 Vue.js 勾搭上了再帶過來一塊兒坐坐吧。固然，既然可以溜達到這裏，想必跟 Vue.js 起碼也已是朋友了吧。

有點囉嗦，不要嫌棄，寫教程也須要有點前戲，畢竟是第一次。

安裝

關於 Vuex 的具體安裝，就不在這裏說了，這個官方仍是比較清晰的，戳此進入。可是須要注意兩點：

• 在一個模塊化的打包系統中，您必須顯式地經過 Vue.use() 來安裝 Vuex，好比：

  import Vue from 'vue'
  import Vuex from 'vuex'
  Vue.use(Vuex)  // 必須調用此函數來注入 Vuex
  複製代碼

• 當使用全局 script 標籤引用 Vuex 時，就不用那麼麻煩了，直接引用進來就好，但要注意引用的前後順序，以下：

  // 在 Vue 以後引入 vuex 會進行自動安裝
  <script src="/path/to/vue.js"></script>
  <script src="/path/to/vuex.js"></script>
  複製代碼

雖然 script 的方式看起來比較自動化，可是接觸得多了，你就會明白模塊化其實才是咱們的最佳姿式。

揭開 Vuex 的神祕面紗

拿到一個工具，咱們第一時間須要弄明白的，就是這個工具到底可以幫助咱們解決什麼問題。好比錘子，砸得了雞蛋打得了電話，好比蘋果，不但能吃還能玩。那麼 Vuex 呢，若是把 Vue.js 比喻成路人（走路的人）的話，那麼 Vuex 就是他的桑塔納，若是他想去隔壁買包煙，那走過去就好了，開個車過去反而是一種負擔，可是若是他想去幾十千米的學校採花，那桑塔納就得派上用場了，否則等他走過去，可能花兒都謝了。

固然，類比只是爲了告訴咱們 Vuex 的價值所在，那麼在具體在實際的應用中，它能幹什麼？何時才須要翻它的牌呢？

咱們先來看一段官方代碼：

new Vue({
  // state  數據源
  data () {
    return {
      count: 0
    }
  },
  // view  視圖
  template: `
    <div>{{ count }}</div>
  `,
  // actions  事件
  methods: {
    increment () {
      this.count++
    }
  }
})
複製代碼

這是一個很簡單的增加型計數功能頁面，和 Vue.js 有一腿的，應該秒懂。經過事件 increment，實現 count 增加，而後渲染到界面上去。

這種方式其實就跟走路買菸同樣，屬於短途效應，官方稱做爲「單向數據流」，很好理解。

可是，狀況變了，如今有兩個頁面 A 和 B，還有如下兩個要求：

• 要求它們都能對 count 進行操控。
• 要求 A 修改了 count 後，B 要第一時間知道，B 修改後，A 也要第一時間知道。

怎麼辦？稍微有點開發經驗的，就可以很容易的想到，把數據源 count 剝離開來，用一個全局變量或者全局單例的模式進行管理，這樣不就在任何頁面均可以很容易的取到這個狀態了。

是啊，這尼瑪就是 Vuex 背後的思想啊，它乾的就是這個事情。是否是有一種被 Vuex 這個高大上的名號所坑害的感受，不就是全局模型嗎，不用它也一樣可能搞定嘛。

是的，也能夠搞定，就像沒有桑塔納，你也能夠去學校看花同樣，只是經歷的過程不同了。

Vuex 的目的是爲了管理共享狀態，爲了達到這個目的，它制定了一系列的規則，好比修改數據源 state、觸發 actions 等等，都須要遵循它的規則，以此來達到讓項目結構更加清晰且易於維護的目的。

那麼咱們再來看看官方的描述：

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

有沒有瞬間清晰多了。

何時翻 Vuex 的牌

其實瞭解了 Vuex 要乾的活之後，何時翻牌，那就容易選擇得多了。就像前面的類比同樣，去隔壁買包煙，你還開個桑塔納，找停車位的時間，煙都抽完了。

因此，咱們要根據項目的須要，來衡量短時間和長期的效益，若是不打算開發大型的單頁應用，那 Vuex 可能仍是你的一個負擔。對於一些不大不小的項目，本身又懶得走，開車又以爲麻煩，那你騎個共享單車過去也行嘛。

這裏的共享單車指代的是官方中的一個簡單的 store 模式，其實就是一個單純的全局對象。

關於全局對象和 Vuex 之間的區別，官方寫得仍是比較通俗易懂的：

Vuex 和單純的全局對象有如下兩點不一樣：

1. Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的組件也會相應地獲得高效更新。
2. 你不能直接改變 store 中的狀態。改變 store 中狀態的惟一途徑就是顯式地提交 (commit) mutation。這樣使得咱們能夠方便地跟蹤每個狀態的變化，從而讓咱們可以實現一些工具幫助咱們更好地瞭解咱們的應用。

簡單示例

// 若是在模塊化構建系統中，請確保在開頭調用了 Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
複製代碼

每個 Vuex 應用的核心就是 store（倉庫）。store 基本上就是一個容器，它包含着你的應用中大部分的狀態 (state)。

注意：若是 mutations 不知道是什麼，不要緊，後面會專門講解到，能夠單純的理解爲只能用它裏面的方法來修改 state 中的數據。

store.commit('increment') // 調用 mutations 中的方法
console.log(store.state.count) // -> 1
複製代碼

爲何要這樣設計的，官方也給出了具體的緣由：

咱們經過提交 mutation 的方式，而非直接改變 store.state.count，是由於咱們想要更明確地追蹤到狀態的變化。這個簡單的約定可以讓你的意圖更加明顯，這樣你在閱讀代碼的時候能更容易地解讀應用內部的狀態改變。此外，這樣也讓咱們有機會去實現一些能記錄每次狀態改變，保存狀態快照的調試工具。有了它，咱們甚至能夠實現如時間穿梭般的調試體驗。

因爲 store 中的狀態是響應式的，在組件中調用 store 中的狀態簡單到僅須要在計算屬性中返回便可。觸發變化也僅僅是在組件的 methods 中提交 mutation。

若是最後一句話沒看懂，不要緊，下一章立刻就會講到。

PS

來點正經的，到這裏，第一篇其實就已經寫完了，固然，這裏的內容都是我看了官方的教程後，本身的一個理解，若是有理解不到位的地方，歡迎拍磚。

轉載聲明：

做者：大宏說

原文連接: www.jianshu.com/p/120eaf503…

後記

以上就是胡哥今天給你們分享的內容，喜歡的小夥伴記得點贊、收藏呀，關注胡哥有話說，學習前端不迷路，歡迎多多留言交流...

胡哥有話說，一個有技術，有情懷的胡哥！現任京東前端攻城獅一枚。 胡哥有話說，專一於大前端技術領域，分享前端系統架構，框架實現原理，最新最高效的技術實踐！