1.Vuex概述
Vuex是實(shí)現(xiàn)組件全局狀態(tài)（數(shù)據(jù)）管理的一種機(jī)制瓷叫，可以方便的實(shí)現(xiàn)組件之間的數(shù)據(jù)共享
使用Vuex管理數(shù)據(jù)的好處：
A.能夠在vuex中集中管理共享的數(shù)據(jù)樟插，便于開(kāi)發(fā)和后期進(jìn)行維護(hù)
B.能夠高效的實(shí)現(xiàn)組件之間的數(shù)據(jù)共享，提高開(kāi)發(fā)效率
C.存儲(chǔ)在vuex中的數(shù)據(jù)是響應(yīng)式的捧颅，當(dāng)數(shù)據(jù)發(fā)生改變時(shí)景图，頁(yè)面中的數(shù)據(jù)也會(huì)同步更新
2.Vuex的基本使用
創(chuàng)建帶有vuex的vue項(xiàng)目，打開(kāi)終端碉哑，輸入命令：vue ui
當(dāng)項(xiàng)目?jī)x表盤打開(kāi)之后挚币，我們點(diǎn)擊頁(yè)面左上角的項(xiàng)目管理下拉列表，再點(diǎn)擊Vue項(xiàng)目管理器
點(diǎn)擊創(chuàng)建項(xiàng)目扣典，如下圖所示
第一步妆毕，設(shè)置項(xiàng)目名稱和包管理器
第二步，設(shè)置手動(dòng)配置項(xiàng)目
第三步贮尖，設(shè)置功能項(xiàng)
第四步笛粘，創(chuàng)建項(xiàng)目
3.使用Vuex完成計(jì)數(shù)器案例
打開(kāi)剛剛創(chuàng)建的vuex項(xiàng)目，找到src目錄中的App.vue組件湿硝，將代碼重新編寫如下：
<template>
<div>
<my-addition></my-addition>
<p>----------------------------------------</p>
<my-subtraction></my-subtraction>
</div>
</template>
<script>
import Addition from './components/Addition.vue'
import Subtraction from './components/Subtraction.vue'
export default {
data() {
return {}
},
components: {
'my-subtraction': Subtraction,
'my-addition': Addition
}
}
</script>
<style>
</style>
在components文件夾中創(chuàng)建Addition.vue組件薪前，代碼如下：
<template>
<div>
<h3>當(dāng)前最新的count值為：</h3>
<button>+1</button>
</div>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
<style>
</style>
在components文件夾中創(chuàng)建Subtraction.vue組件，代碼如下：
<template>
<div>
<h3>當(dāng)前最新的count值為：</h3>
<button>-1</button>
</div>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
<style>
</style>
最后在項(xiàng)目根目錄(與src平級(jí))中創(chuàng)建 .prettierrc 文件关斜，編寫代碼如下：
{
"semi":false,
"singleQuote":true
}
4.Vuex中的核心特性
A.State
State提供唯一的公共數(shù)據(jù)源示括，所有共享的數(shù)據(jù)都要統(tǒng)一放到Store中的State中存儲(chǔ)
例如，打開(kāi)項(xiàng)目中的store.js文件痢畜，在State對(duì)象中可以添加我們要共享的數(shù)據(jù)垛膝，如：count:0
在組件中訪問(wèn)State的方式：
1).this.$store.state.全局?jǐn)?shù)據(jù)名稱 如：this.$store.state.count
2).先按需導(dǎo)入mapState函數(shù)： import { mapState } from 'vuex'
然后數(shù)據(jù)映射為計(jì)算屬性： computed:{ ...mapState(['全局?jǐn)?shù)據(jù)名稱']) }
B.Mutation
Mutation用于修改變更$store中的數(shù)據(jù)
使用方式：
打開(kāi)store.js文件鳍侣，在mutations中添加代碼如下
mutations: {
add(state,step){
//第一個(gè)形參永遠(yuǎn)都是state也就是$state對(duì)象
//第二個(gè)形參是調(diào)用add時(shí)傳遞的參數(shù)
state.count+=step;
}
}
然后在Addition.vue中給按鈕添加事件代碼如下：
<button @click="Add">+1</button>
methods:{
Add(){
//使用commit函數(shù)調(diào)用mutations中的對(duì)應(yīng)函數(shù)，
//第一個(gè)參數(shù)就是我們要調(diào)用的mutations中的函數(shù)名
//第二個(gè)參數(shù)就是傳遞給add函數(shù)的參數(shù)
this.$store.commit('add',10)
}
}
使用mutations的第二種方式：
import { mapMutations } from 'vuex'
methods:{
...mapMutations(['add'])
}
如下：
import { mapState,mapMutations } from 'vuex'
export default {
data() {
return {}
},
methods:{
//獲得mapMutations映射的sub函數(shù)
...mapMutations(['sub']),
//當(dāng)點(diǎn)擊按鈕時(shí)觸發(fā)Sub函數(shù)
Sub(){
//調(diào)用sub函數(shù)完成對(duì)數(shù)據(jù)的操作
this.sub(10);
}
},
computed:{
...mapState(['count'])
}
}
C.Action
在mutations中不能編寫異步的代碼吼拥，會(huì)導(dǎo)致vue調(diào)試器的顯示出錯(cuò)倚聚。
在vuex中我們可以使用Action來(lái)執(zhí)行異步操作。
操作步驟如下：
打開(kāi)store.js文件扔罪，修改Action秉沼，如下：
actions: {
addAsync(context,step){
setTimeout(()=>{
context.commit('add',step);
},2000)
}
}
然后在Addition.vue中給按鈕添加事件代碼如下：
<button @click="AddAsync">...+1</button>
methods:{
AddAsync(){
this.$store.dispatch('addAsync',5)
}
}
第二種方式：
import { mapActions } from 'vuex'
methods:{
...mapMutations(['subAsync'])
}
如下：
import { mapState,mapMutations,mapActions } from 'vuex'
export default {
data() {
return {}
},
methods:{
//獲得mapMutations映射的sub函數(shù)
...mapMutations(['sub']),
//當(dāng)點(diǎn)擊按鈕時(shí)觸發(fā)Sub函數(shù)
Sub(){
//調(diào)用sub函數(shù)完成對(duì)數(shù)據(jù)的操作
this.sub(10);
},
//獲得mapActions映射的addAsync函數(shù)
...mapActions(['subAsync']),
asyncSub(){
this.subAsync(5);
}
},
computed:{
...mapState(['count'])
}
}
D.Getter
Getter用于對(duì)Store中的數(shù)據(jù)進(jìn)行加工處理形成新的數(shù)據(jù)
它只會(huì)包裝Store中保存的數(shù)據(jù)，并不會(huì)修改Store中保存的數(shù)據(jù)矿酵，當(dāng)Store中的數(shù)據(jù)發(fā)生變化時(shí)唬复，Getter生成的內(nèi)容也會(huì)隨之變化
打開(kāi)store.js文件，添加getters全肮，如下：
export default new Vuex.Store({
.......
getters:{
//添加了一個(gè)showNum的屬性
showNum : state =>{
return '最新的count值為：'+state.count;
}
}
})
然后打開(kāi)Addition.vue中敞咧，添加插值表達(dá)式使用getters
<h3>{{$store.getters.showNum}}</h3>
或者也可以在Addition.vue中，導(dǎo)入mapGetters辜腺，并將之映射為計(jì)算屬性
import { mapGetters } from 'vuex'
computed:{
...mapGetters(['showNum'])
}
