Vuex 是什么？
Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
https://www.jianshu.com/p/5624362cd1f4--出處
看完這段專業的解釋，我反正是一臉懵逼，內心毫無波瀾，甚至有點想吃醬肘子。感覺和沒說一樣嘛！keep going。
什么是"狀態管理模式"？
一個簡單Vue計數器應用
new Vue({ // state data () { return { count: 0 } }, // view template: ` <div>{{ count }}</div> `, // actions methods: { increment () { this.count++ } } })
這個狀態自管理應用包含以下幾個部分：
- state，驅動應用的數據源；
- view，以聲明方式將 state 映射到視圖；
- actions，響應在 view 上的用戶輸入導致的狀態變化。
這是一種“單向數據流”的理念。
然后說明一下這種理念的缺點，當我們的應用遇到多個組件共享狀態時，單向數據流的簡潔性很容易被破壞：
- 多個視圖依賴於同一狀態。
- 來自不同視圖的行為需要變更同一狀態。
這里說的是，vue 組件之間的傳值操作，組件不多的情況下，嵌套的父子組件（prop，emit，on）和兄弟組件（global event bus）還容易操作一些。但是如果項目龐大，組件結構復雜，組件間的數據傳遞會變得很困難，后期代碼不易維護。
看到這里，貌似明白了些這鬼東西是要解決什么問題了。好的，然后我們繼續往“坑”里走。
最簡單的store
每一個 Vuex 應用的核心就是 store（倉庫）。“store”基本上就是一個容器，它包含着你的應用中大部分的狀態 (state)。Vuex 和單純的全局對象有以下兩點不同：
- Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那么相應的組件也會相應地得到高效更新。
- 你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態的變化，從而讓我們能夠實現一些工具幫助我們更好地了解我們的應用。
// 如果在模塊化構建系統中，請確保在開頭調用了 Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } })
現在，你可以通過 store.state 來獲取狀態對象，以及通過 store.commit 方法觸發狀態變更：
store.commit('increment'); // 觸發修改變量的方法
console.log(store.state.count); // -> 1
WTF？這是啥，這不就是“全局變量”嘛！多個組件可能用到的數據，存儲到 store（倉庫）里，但是這些數據是響應式的，所以對這些數據進行操作時，要遵守相應的規則。例如上面的例子。對 count 進行修改，要通過 commit 來觸發 mutation 里的方法對數據進行操作。
- State
- Getter
- Mutation
- Action
- Module
讓我們開始吧。
State
Vuex 使用單一狀態樹，用一個對象就包含了全部的應用層級狀態。至此它便作為一個“唯一數據源 (SSOT)”而存在。這也意味着，每個應用將僅僅包含一個 store 實例。單一狀態樹讓我們能夠直接地定位任一特定的狀態片段，在調試的過程中也能輕易地取得整個當前應用狀態的快照。
這段話說的是一個 Vuex 只能包含一個store（存儲數據的庫），這樣你在訪問數據的時候好找些。
store 的其中一個配置項就是 state 。這個state吧，可以把他比作成vue實例中的data選項，就是把數據放在這里面。
const state = { // 商品列表 shopList：[{ id: 1, name: '蘭博基尼', price: 10 },{ id: 2, name: '五菱宏光', price: 99999 }], // 購物車列表 addList: [] }; new Vuex.Store({ state, // 這里是es6語法，相當於 state: state ... });
獲取商品列表 this.$store.state.shopList 就能看到了，或者使用輔助函數mapState，這樣雖然方便簡單，建議新手先研究一下 es6 和方法原理，這里不做解釋。
computed: mapState([ // 映射 this.shopList為 store.state.shopList 'shopList' ])
Vuex 文檔中有很多 es6 語法，如果有還不了解的同學們，可要抓緊上車嘍。
Getter
我一度懷疑是不是文檔寫錯了，少加了一個s。（Getters）
這一項從字面意思上就可以看出，他是用來取數據，得到數據的。有人會問，為什么不直接用this.$store.state.shopList這種方式直接拿呢。這種方式確實可以拿到，但是經常會有一些情況是對拿到的數據做一些處理，例如格式化、過濾數據。。。這時候就會用到 Getter 了。
const getters = { // 獲取id為2的商品 shopid2(state){ return state.shopList.find((el)=>{ return el.id == 2; }); } };
使用this.$store.getters.shopid2得到五菱宏光，即可加入秋名山車神爭霸，走上人生巔峰。
輔助函數 mapGetters 方法：
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用對象展開運算符將 getter 混入 computed 對象中
...mapGetters([
'shopid2'
// ...
])
}
}
Mutation
更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似於事件：每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是我們實際進行狀態更改的地方，並且它會接受 state 作為第一個參數：
const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) { // 變更狀態 state.count++ } } })
你需要以相應的 type 調用 store.commit 方法：this.$store.commit('increment')
你想要動我的數據，就得守我 Vuex 的規矩（順我者昌，逆我者亡）。
拿數據用 Getters ，改數據用 mutation 。這個 mutation 有點像 vue 的生命周期鈎子函數，里面是一些方法，通過 this.$store.commit（typeName） 對應的函數名稱，觸發對應的函數。
提交載荷（Payload）
你可以向 store.commit 傳入額外的參數，即 mutation 的 載荷（payload）：
// ... mutations: { increment (state, n) { state.count += n } } store.commit('increment', 10); // 在大多數情況下，載荷應該是一個對象，這樣可以包含多個字段並且記錄的 mutation 會更易讀 mutations: { increment (state, payload) { state.count += payload.amount } } store.commit('increment', { amount: 10 })
輔助函數 mapMutations 方法：
import { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
'increment', // 將 `this.increment()` 映射為 `this.$store.commit('increment')`
// `mapMutations` 也支持載荷：
'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.commit('incrementBy', amount)`
]),
...mapMutations({
add: 'increment' // 將 `this.add()` 映射為 `this.$store.commit('increment')`
})
}
}
在 Vuex 中，mutation 都是同步事務：
store.commit('increment')
// 任何由 "increment" 導致的狀態變更都應該在此刻完成。
為了處理異步操作，讓我們繼續往下走 。
Action
Action 類似於 mutation，不同在於：
- Action 提交的是 mutation，而不是直接變更狀態。
- Action 可以包含任意異步操作。
也就是說，Action 執行的還是 Mutation ，只不過他可以異步執行，差不多就是給 Mutation 外邊包了一層函數。
actions: { incrementAsync ({ commit }) { setTimeout(() => { commit('increment'); // 在異步函數成功后調用 Mutation }, 1000) } }
通過 this.$store.dispatch('incrementAsync')即可調用。
輔助函數 mapActions 方法
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
'increment', // 將 `this.increment()` 映射為 `this.$store.dispatch('increment')`
// `mapActions` 也支持載荷：
'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.dispatch('incrementBy', amount)`
]),
...mapActions({
add: 'increment' // 將 `this.add()` 映射為 `this.$store.dispatch('increment')`
})
}
}
Module
為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割：
const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> moduleA 的狀態 store.state.b // -> moduleB 的狀態
對於大型應用，我們會希望把 Vuex 相關代碼分割到模塊中。下面是項目結構示例：
├── index.html
├── main.js
├── api
│ └── ... # 抽取出API請求
├── components
│ ├── App.vue
│ └── ...
└── store
├── index.js # 我們組裝模塊並導出 store 的地方
├── actions.js # 根級別的 action
├── mutations.js # 根級別的 mutation
└── modules
├── cart.js # 購物車模塊
└── products.js # 產品模塊
什么時候用 Vuex？
這個嘛，很簡單。你覺得你的項目里，各組件之間傳參什么的，相處的很和諧，那就無所謂用不用了。
當你的組件兄弟們有傳參問題，有很多這個組件要用，那個組件要，其他好幾個組件也要，要的你生不如死，你就可以考慮一下了。
總結
最后，我們再回顧一下 Vuex 都包含什么，是做什么用的。
store
俗稱倉庫，倉庫里是你的模塊的數據、數據狀態、對數據做的操作，都在這個倉庫里。
state
倉庫里的數據都放到這個里面，很像 vue 的 data 。
getters
通常獲取可以用this.$store.state.shopList就可以拿到，但是如果你想對這項數據加工一下（格式化、過濾），就在 getters 里處理，然后通過this.$store.getters.eventName獲取。
mutation
修改數據操作，你想對某項數據進行修改，就得守規矩。不能用this.$store.state.count=99，要把修改函數寫在 mutation 里面，用this.commit('eventName')觸發修改函數。注意，這里的操作必須是同步。
action
異步觸發 mutation 。
module
給多個狀態模塊分類。
轉自: https://www.jianshu.com/p/5624362cd1f4