1、安裝
直接下載 / CDN 引用
https://unpkg.com/vuex
Unpkg.com 提供了基於 NPM 的 CDN 鏈接。以上的鏈接會一直指向 NPM 上發佈的最新版本。您也可以通過 https://unpkg.com/[email protected] 這樣的方式指定特定的版本。
在 Vue 之後引入 vuex 會進行自動安裝：
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>
1.1 NPM
npm install vuex --save
1.2 Yarn
yarn add vuex
在一個模塊化的打包系統中，您必須顯式地通過 Vue.use() 來安裝 Vuex：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
當使用全局 script 標籤引用 Vuex 時，不需要以上安裝過程。
1.3 Promise
Vuex 依賴 Promise。如果你支持的瀏覽器並沒有實現 Promise (比如 IE)，那麼你可以使用一個 polyfill 的庫，例如 es6-promise。
你可以通過 CDN 將其引入：
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
然後 window.Promise 會自動可用。
如果你喜歡使用諸如 npm 或 Yarn 等包管理器，可以按照下列方式執行安裝：
npm install es6-promise --save # npm
yarn add es6-promise # Yarn
或者更進一步，將下列代碼添加到你使用 Vuex 之前的一個地方：
import 'es6-promise/auto'
1.4 自己構建
如果需要使用 dev 分支下的最新版本，您可以直接從 GitHub 上克隆代碼並自己構建。
git clone https://github.com/vuejs/vuex.git node_modules/vuex
cd node_modules/vuex
npm install
npm run build
2、Vuex 是什麼？
Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。
2.1 什麼是“狀態管理模式”？
讓我們從一個簡單的 Vue 計數應用開始：
new Vue({
// state
data () {
return {
count: 0
}
},
// view
template: `
<div>{{ count }}</div>
`,
// actions
methods: {
increment () {
this.count++
}
}
})
這個狀態自管理應用包含以下三個部分：
- state，驅動應用的數據源；
- view，以聲明方式將 state 映射到視圖；
- actions，響應在 view 上的用戶輸入導致的狀態變化。
以下是一個表示“單向數據流”理念的簡單示意圖：
但是，當我們的應用遇到多個組件共享狀態時，單向數據流的簡潔性很容易被破壞：
多個視圖依賴於同一狀態。
來自不同視圖的行爲需要變更同一狀態。
對於問題一，傳參的方法對於多層嵌套的組件將會非常繁瑣，並且對於兄弟組件間的狀態傳遞無能爲力。對於問題二，我們經常會採用父子組件直接引用或者通過事件來變更和同步狀態的多份拷貝。以上的這些模式非常脆弱，通常會導致無法維護的代碼。
因此，我們爲什麼不把組件的共享狀態抽取出來，以一個全局單例模式管理呢？在這種模式下，我們的組件樹構成了一個巨大的“視圖”，不管在樹的哪個位置，任何組件都能獲取狀態或者觸發行爲！
通過定義和隔離狀態管理中的各種概念並通過強制規則維持視圖和狀態間的獨立性，我們的代碼將會變得更結構化且易維護。
這就是 Vuex 背後的基本思想，借鑑了 Flux、Redux 和 The Elm Architecture。與其他模式不同的是，Vuex 是專門爲 Vue.js 設計的狀態管理庫，以利用 Vue.js 的細粒度數據響應機制來進行高效的狀態更新。
如果你想交互式地學習 Vuex，可以看這個 Scrimba 上的 Vuex 課程，它將錄屏和代碼試驗場混合在了一起，你可以隨時暫停並嘗試。
2.2 什麼情況下，我應該使用 Vuex？
Vuex 可以幫助我們管理共享狀態，並附帶了更多的概念和框架。這需要對短期和長期效益進行權衡。
如果您不打算開發大型單頁應用，使用 Vuex 可能是繁瑣冗餘的。確實是如此——如果您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 store 模式 就足夠您所需了。但是，如果您需要構建一箇中大型單頁應用，您很可能會考慮如何更好地在組件外部管理狀態，Vuex 將會成爲自然而然的選擇。引用 Redux 的作者 Dan Abramov 的話說就是：
- Flux 架構就像眼鏡：您自會知道什麼時候需要它。