Vuex 教程


什么是 Vuex

Vuex 是一個專門為 Vue.js 應用設計的 狀態管理模型 + 庫。它為應用內的所有組件提供集中式存儲服務,其中的規則確保狀態只能按預期方式變更。它可以與 Vue 官方開發工具擴展(devtools extension) 集成,提供高級特征,比如 零配置時空旅行般(基于時間軸)調試,以及狀態快照 導出/導入。

什么是”狀態管理模型“?

讓我們從一個簡單的 Vue 計數器應用開始:

new Vue({
  // state (狀態)
  data () {
    return {
      count: 0
    }
  },
  // view (視圖)
  template: `
    <div>{{ count }}</div>
  `,
  // actions (動作)
  methods: {
    increment () {
      this.count++
    }
  }
})

這是一個含有以下部分的自包含( self-contained )應用:

  • state (狀態),驅動我們應用的真實的源;
  • view (視圖),對應著 狀態 的聲明式映射;
  • actions (動作),用戶在 視圖 上的輸入引起狀態的更改的可能方式。

這是一個非常簡單的“單向數據流”思想的體現:


不管怎樣,當我們有多組件共享公共狀態時,簡單快速地分解如下:

  • 多視圖可能依賴于同一份狀態。
  • 來自不同視圖的動作可能需要變更同一份狀態。

對于問題一,在深層嵌套組件間傳遞屬性過于冗長,并且不能簡單地在同級別的組件間傳遞。對于問題二,我們常常采取這樣的解決方案:直接引用 父/子 實例,又或是通過事件來修改和同步多份狀態副本。這樣的模型是脆弱的,代碼很快會變得不可維護。

所以我們為什么不從多個組件中把共享狀態提取出來并作為全局單件管理呢?這樣的話,我們的組件樹就變成了一個大的”視圖“,樹中的任意一個組件,不管它們在哪個位置,都可以訪問狀態或者觸發動作!

另外,通過定義和分離狀態管理中的概念,強制使用某些規則,使得代碼更結構化和高可維護性。

這是 Vuex 背后的基本思想,受到了 FluxReduxThe Elm Architecture的啟發。不像其他模型,Vuex 也是一個專門為 Vue.js 設計的庫,充分利用了它微妙的響應式機制,從而實現高效更新。

vuex

什么時候應該使用?

盡管 Vuex 幫助我們處理共享狀態管理,但是也帶來了更多的思考和樣板文件。這是一個短期效益和長期效益的權衡。

如果你沒有開發過大型的單頁應用(SPA)就立刻上 Vuex,可能會覺得繁瑣然后排斥,這是很正常的 —— 如果是個簡單的應用,大多數情況下,不用 Vuex 還好,你要的可能就是個簡單的 全局事件總線(global event bus)。不過,如果你構建的是一個中到大型單頁應用,當你在考慮如何更好的在 Vue 組件外處理狀態時,Vuex 自然就是你的下一步選擇。Redux 的作者有一句話說的不錯:

原文:Flux libraries are like glasses: you’ll know when you need them.
譯文:Flux 庫就像眼鏡:當你需要它們的時候你會懂的。


股票配资平台l选一直牛