vuex 原始碼：原始碼系列解讀總結

cobish發表於2018-05-06
Vue原始碼

前言

vuex 原始碼系列總共有 9 篇文章，主要圍繞著 vuex 的 state、getter、mutation、action 和 module 來解讀。一方面可以幫助到讀者更加了解 vuex，另一方面也幫助自己提升了閱讀原始碼的能力。

順便安利一下作者的 Github 倉庫：github.com/cobish/code…，歡迎 star，臣不勝受恩感激。

全目錄

  1. vuex 原始碼：如何實現一個簡單的 vuex
  2. vuex 原始碼：初探 vuex 之 install
  3. vuex 原始碼：深入 vuex 之 state
  4. vuex 原始碼：深入 vuex 之 getter
  5. vuex 原始碼：深入 vuex 之 mutation
  6. vuex 原始碼：深入 vuex 之 action
  7. vuex 原始碼：深入 vuex 之 module
  8. vuex 原始碼：深入 vuex 之 namespaced
  9. vuex 原始碼：深入 vuex 之輔助函式 mapState

初衷

說實話，剛開始的時候我也沒想到自己能夠堅持下來。根據以往的經驗，我都是半途而廢的。無論是 jquery 原始碼，還是 underscore 原始碼，我都沒能堅持。

細想了一下原因，有這麼幾個因素吧：

  • jquery 和 underscore 功能模組太多，程式碼量大，自己沒能耐心讀完；
  • 日常工作中比較少用到 underscore，jquery 使用到的也是一直幾個方法；
  • vuex 在日常工作中使用到的頻率不低；
  • vuex 程式碼量小，功能模組不多，程式碼簡潔易懂。

對於作者來說，vuex 的原始碼更易閱讀完成。

簡單講解

vue 官網有一個 bus 的實現，bus 就是 new 出來了一個 vue 例項，利用 vue 的 data 響應，將其掛載在根例項下，這便是 vuex 的雛形了。

在此基礎之上，state 與 data 對應，getter 與 computed 對應，實現了 跨元件的狀態獲取。再規定了 mutation 和 action，分別用來同步和非同步修改狀態。最後加上 module 來實現名稱空間。

這也就是 vuex 的核心概念原理。當然這裡沒有深入例如外掛的其它原始碼。

最後

這是作者第一次完整地閱讀完一個開源庫，總結出的文章難免會有些錯誤。若讀者發現，請聯絡作者，謝謝。PS：牆裂建議在閱讀文章的時候，同時開啟 vuex 的程式碼，文章中的程式碼只是冰山一角，並不能讓讀者看到整座冰山。臨表涕零，不知所言。

相關文章