vuex理解覆积。
Vuex是一個(gè)專(zhuān)為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式听皿。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化宽档。
什么是“狀態(tài)管理模式”尉姨？
讓我們從一個(gè)簡(jiǎn)單的Vue計(jì)數(shù)應(yīng)用開(kāi)始：
這個(gè)狀態(tài)管理應(yīng)用包含以下幾個(gè)部分：
state,驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源。
view,以聲明的方式將state映射到視圖雌贱。
actions,響應(yīng)在view上的用戶(hù)輸入導(dǎo)致的狀態(tài)變化啊送。
但是當(dāng)我們的應(yīng)用遇到多個(gè)組件共享狀態(tài)時(shí)偿短，單向數(shù)據(jù)流的簡(jiǎn)潔性很容易被破壞：
1.多個(gè)視圖依賴(lài)于同一個(gè)狀態(tài)。
2.來(lái)自不同視圖的行為需要變更同一狀態(tài)馋没。
對(duì)于問(wèn)題一昔逗，傳參的方法對(duì)于多層嵌套的組件將會(huì)非常的繁瑣，并且對(duì)于兄弟組件的狀態(tài)傳遞無(wú)能為力篷朵。
對(duì)于問(wèn)題二勾怒，我們經(jīng)常會(huì)采用父子組件直接引用或則通過(guò)事件變更和同步狀態(tài)的多份拷貝。
以上方法不利于代碼的維護(hù)声旺。
Vuex借鑒了Flux笔链，Redux，和The Elm Architecture.
1.引入vuex腮猖，利用npm包管理工具鉴扫，進(jìn)行安裝Vuex空繁。
npm install vuex --save
需要注意的是這里一定要加上--save装哆，因?yàn)檫@個(gè)包是在生產(chǎn)環(huán)境中使用的。
2.新建一個(gè)vuex文件夾侍瑟，并在文件夾下新建store.js文件姐赡，文件中引入我們的vue和vuex莱预。
01，import Vue from 'vue';
02项滑，import vuex from 'vuex';
3.使用vuex依沮，引入之后用Vue.use進(jìn)行引用。
Vue.use(vuex);
然后導(dǎo)出：
export default new vuex.Store({})
4.main.js文件中全局引用枪狂。
import store from ‘store.js文件路徑’;
new Vue ({
? ? store,
})
入門(mén)小demo
1.在store.js文件里增加一個(gè)常量對(duì)象危喉。
01寫(xiě)法：
const state = {
????count:1
}
export default new vuex.Store({
? ? state
})
02寫(xiě)法：
?export default new vuex.Store({
? ? state:{
? ? ? ? count:1
? ? }
})
2.新建一個(gè)vue模板,并在模板中使用{{$store.state.count}}輸出count的值。
3.在store.js文件中加入兩個(gè)改變state的方法摘完。
以第二種方法為例子：
mutations:{
? ? add(state){
? ? ? ? state.count++;
? ? }
? ? reduce(state){
? ? ? ? state.count--;
? ? }
}
4.在vue模板中加入兩個(gè)按鈕姥饰，并調(diào)用mutations中的方法。
2.state訪問(wèn)狀態(tài)對(duì)象孝治。
把store.js中的狀態(tài)對(duì)象賦值給模板里data中的值列粪，有三種賦值方式。
1.通過(guò)computed的計(jì)算屬性直接賦值谈飒。
computed:{
? ? count(){
? ? ? ? return this.$store.state.count;
? ? }
}
2.通過(guò)mapState的對(duì)象來(lái)賦值岂座。
01，import {mapState} from 'vuex';
02杭措，computed:mapState(["count"]);當(dāng)映射的計(jì)算屬性的名稱(chēng)與 state 的子節(jié)點(diǎn)名稱(chēng)相同時(shí)费什，我們也可以給?mapState?傳一個(gè)字符串?dāng)?shù)組。
mapState的另一種用法：
mapState與局部計(jì)算屬性混用：
3.模板獲取Mutations方法手素。
更改Vuex的store中的狀態(tài)的唯一方法是提交mutaition鸳址。Vuex中的mutation非常類(lèi)似于事件：每個(gè)mutation都有一個(gè)字符串的事件類(lèi)型（type）和一個(gè)回調(diào)函數(shù)（handler）瘩蚪。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會(huì)接受state作為第一個(gè)參數(shù)稿黍。
mutation調(diào)用方法：
4.getter
有時(shí)我們需要從store中的state中派生出一些狀態(tài)疹瘦，例如對(duì)列表進(jìn)行過(guò)濾并計(jì)數(shù)：
Getter接受state作為其第一個(gè)參數(shù)，Getter會(huì)爆露為store.gettres對(duì)象巡球，你可以以屬性的形式訪問(wèn)這些值：
this.$store.getters.doneTodos;
Getter也可以接受其它getter作為第二個(gè)參數(shù)：
我們可以很容易的在任何組件中使用它：
也可以通過(guò)方法訪問(wèn)：你可以通過(guò)讓getter返回一個(gè)函數(shù)言沐，來(lái)實(shí)現(xiàn)給getter傳參。在你對(duì)store里的數(shù)組進(jìn)行查詢(xún)時(shí)非常有用酣栈。
mapGetters輔助函數(shù)
5.Action
action的作用跟mutation的作用是一致的险胰，它提交mutation從而改變state。
Action類(lèi)似于mutation矿筝，不同在于Action提交的是mutation起便，而不是直接更改狀態(tài)。Action可以包含任意異步操作跋涣。
注冊(cè)一個(gè)簡(jiǎn)單的action:
Action函數(shù)接受一個(gè)與store實(shí)例具有相同方法和屬性的context對(duì)象缨睡，因此可以調(diào)用context.commit提交一個(gè)mutation，或則通過(guò)context.state和context.getters來(lái)獲取state和getters陈辱。實(shí)踐中，我們經(jīng)常會(huì)使用ES2015的參數(shù)解構(gòu)來(lái)簡(jiǎn)化代碼细诸，特別是需要調(diào)用commit很多次的時(shí)候：
Action通過(guò)store.dispath方法觸發(fā)：
Actions支持同樣的載荷方式和對(duì)象方式進(jìn)行分發(fā)：
你在組件中使用?this.$store.dispatch('xxx')?分發(fā) action沛贪，或者使用?mapActions?輔助函數(shù)將組件的 methods 映射為?store.dispatch?調(diào)用（需要先在根節(jié)點(diǎn)注入?store）：
