介紹：
?? ? ?本文主要介紹vuex 中五個(gè)核心概念的基本用法佳恬，幫助對(duì)于不太看懂官方文檔的同學(xué)
前提：
1. 熟悉vue的基本用法（至少官方的api大概都會(huì)用）
2.能創(chuàng)建基本vue-cli腳手架
3.熟悉es6（也叫es2015），去看一下阮一峰e(cuò)s6入門（箭頭函數(shù)，解構(gòu)賦值优床，擴(kuò)展運(yùn)算符旧蛾，module悲龟，這幾個(gè)比較重要常見访娶，也非常有用）
準(zhǔn)備階段：
1.搭建完一個(gè)基本vue-cli 腳手架
1.安裝vuex，
? ? ? ? ? 命令行輸入 ?`npm install vuex`
2.完成2個(gè)組件和一個(gè)stroe.js文件
hello.vue文件
ctrl.vue文件
text.vue
store.js
在main.js 將vuex注入到vue實(shí)例中
運(yùn)行效果圖
組件獲取state 兩種方法獲取
1.$store.state.list??(直接獲取 數(shù)據(jù)量小用這個(gè)就行)
2.利用mapState映射 (數(shù)據(jù)量大復(fù)雜用這個(gè))
...mapState(['list']) 這種里面是數(shù)組寫法怀酷，組件用list來獲取
...mapState({ls:'list'}) 這種里面是對(duì)象寫法稻爬，組件用ls來獲取（ls就是list新的名字）
組件獲取getters方法??getters就是state的一個(gè)計(jì)算屬性蜕依，類似 vue實(shí)例里面的data和computed桅锄，兩種方法獲取
1.$store.getters.getTexts(直接獲取)
2.利用mapGetters映射
...mapGetters(['getTexts']) 這種里面是數(shù)組寫法，方法用getTexts來獲取
...mapGetter({gt:'getTexts'}) 這種里面是對(duì)象寫法样眠，組件用gt來獲扔蚜觥（ge就是GetText新的名字）
組件獲取mutations方法并觸發(fā)
1.$store.commit('add',[11,22,33,44,55,66]) (在組件點(diǎn)擊事件里面直接觸發(fā))
2.利用mapMutations映射
...mapMutations(['add']) 這種里面是數(shù)組寫法，方法用add來使用
...mapMutations({ad:'add'}) 這種里面是對(duì)象寫法檐束，組件用ad來使用（ad就是add新的名字）
組件獲取actions方法并觸發(fā)
1.$store.dispatch('add',[11,22,33,44,55,66]) (在組件點(diǎn)擊事件里面直接觸發(fā))
2.利用mapMutations映射
...mapActions(['asyncfn']) 這種里面是數(shù)組寫法辫秧，方法用add來使用
...mapActions({afn:'asyncfn'}) 這種里面是對(duì)象寫法，組件用afn來使用（afn就是asyncfn新的名字）
ps：這也是醉了厢塘，第一次寫簡(jiǎn)書茶没，死活復(fù)制不了代碼，干脆就一起圖片文字一起寫了
利用module 將store數(shù)據(jù)劃分更細(xì)的模塊
user.js
project.js 和user.js 一樣晚碾，就是list 數(shù)據(jù)不一樣
store.js文件
ctrl.vue文件
test.vue文件
運(yùn)行效果圖
整理一下
獲取不同的模塊下面的state數(shù)據(jù)抓半，
<pre>this.$store.state.a.list</pre>
獲取不同模塊的getters和mutations和actions，首先將namespaced：true屬性格嘁，加入模塊這樣每一個(gè)getters笛求，mutations，actions都會(huì)有各組模塊的前綴糕簿，之后利用mapGetter來將getter里面的方法映射到我們的組件中（如果不加namespaced：true屬性探入，所有的模塊的getters下面的方法會(huì)在一個(gè)命名空間內(nèi)，（也就是在一個(gè)對(duì)象內(nèi)）懂诗，你只能讓getters下面的每個(gè)方法名字不一樣才能正常獲取蜂嗽，如果方法名字重復(fù)了，你只能獲取第一個(gè)）
```
...mapGetter('a/',[
? ? ? ?'getText'
])
```
或者
```
...mapGetter('a/',{
? ? ? ?gt:'getText'
})
```
或者
```
...mapGetter({
? ? ? ?gt:'a/getter'
})
```
同理 殃恒，利用mapMutations和mapAction將mutations和actions頁getters類似
最后后在組件中直接調(diào)用就行了植旧，
ps：就算不加入namespaced：true屬性也是可以的，這樣你必須讓所有模塊內(nèi)部getters离唐，里面的方法名字不一樣病附，才能利用this.$store.getters.(獨(dú)一無二的名字).或者mapgetters映射(不加入模塊名字的情況下）使用，mutations亥鬓，actions也是一樣的完沪。
真的蛋疼，這個(gè)代碼塊弄了好久弄不出來嵌戈，只好全是圖片了覆积，大家湊合看吧。咕别。
