使用VueX方法
1.安裝vuex模塊
????????npm install vuex --save
2.作為插件使用
????????Vue.use(Vuex)
3.定義容器
????????new Vuex.Store({
????????????這里面放定義狀態(tài)代碼
????????})
4.注入根實(shí)例
vuex代碼，一般放在src/store/index.js文件中
如何在vuex中定義狀態(tài)數(shù)據(jù)？
例：
????????let store = new Vuex.Store({?//創(chuàng)建Vuex實(shí)例
? ? ? ? ?//這里定義狀態(tài)數(shù)據(jù)
????????????????state: {
? ????????????? ???? count: 100
? ? ? ? ? ? ? ? ?}
????????});
vuex核心概念
store：類(lèi)似容器掌腰，包含應(yīng)用的大部分狀態(tài)；
注意：
????????* 一個(gè)頁(yè)面只能有一個(gè)store
? ? ? ? * 狀態(tài)存儲(chǔ)是響應(yīng)式的
????????* 不能直接改變store中的狀態(tài)拢肆，唯一途徑顯示地提交mutations
State：包含所有應(yīng)用級(jí)別狀態(tài)的對(duì)象
Getters：在組件內(nèi)部獲取store中狀態(tài)的函數(shù)
Mutations：唯一修改狀態(tài)的事件回調(diào)函數(shù)
Actions：包含異步操作、提交mutation改變狀態(tài)
Modules：將store分割成不同的模塊
如何獲取定義的狀態(tài)數(shù)據(jù)靖诗？
在需要獲取數(shù)據(jù)的單頁(yè)面文件組件中，使用以下方法：
如何改變vuex容器中（store）如的值支示？
方法1.改變非異步(不通過(guò)ajax)的值
????使用mutations屬性,處理同步數(shù)據(jù)修改
例:
vuex對(duì)象中寫(xiě)：
在單頁(yè)面文件組件中調(diào)用
注意：
mutations不能直接調(diào)用刊橘；
調(diào)用方法：????
????$store.commit("寫(xiě)mutations中的回調(diào)函數(shù)名");
????這個(gè)方法，一個(gè)參數(shù)的時(shí)候颂鸿，是直接調(diào)用mutations函數(shù)促绵。
????第二個(gè)參數(shù)，代表傳入mutations函數(shù)的參數(shù)嘴纺。
????第二個(gè)參數(shù)败晴，可以是1個(gè)，多個(gè)的時(shí)候栽渴，傳一個(gè)對(duì)象尖坤；
如:
????$store.commit("寫(xiě)mutations中的回調(diào)函數(shù)名",{n:2});
????這樣在mutations:中就可以接收了
????commit的對(duì)象形式寫(xiě)法
????$store.commit({
????????type:'寫(xiě)mutations中的回調(diào)函數(shù)名',
????????de:10 //這個(gè)就是第二個(gè)參數(shù)，key名隨便起
????})
方法2.改變異步(ajax獲取)的值
使用actions：處理異步數(shù)據(jù)修改
????//要先寫(xiě)好mutations的方法
????mutations:{
????addIncrement(state){
state.count +=1;
????}
? ? ? },
? /*
????當(dāng)遇到數(shù)據(jù)是通過(guò)ajax異步請(qǐng)求過(guò)來(lái)的闲擦，這時(shí)數(shù)據(jù)會(huì)有延遲
? ? 這種時(shí)候慢味，就需要使用actions來(lái)提交mutations中的回調(diào)函數(shù)
*/
actions:{
? ? //函數(shù)名隨便寫(xiě)场梆，參數(shù)是一個(gè)對(duì)象，和store對(duì)象的方法屬性都一樣的對(duì)象纯路；
????????addAction(context){
setTimeout(()=>{
//通過(guò)context對(duì)象或油，可以使用commit方法，參數(shù)輸入mutations中的函數(shù)名
? ? ? ? context.commit('addIncrement');
},1000);
}
}
調(diào)用actions中的函數(shù)驰唬，方法如下
dispatch傳參的格式方法顶岸，與this.$store.commit()一模一樣
this.$store.dispatch('addAction');
actions中的函數(shù)可以相互調(diào)用傳值；
例：
actions:{
? ? //函數(shù)名隨便寫(xiě)叫编，參數(shù)是一個(gè)對(duì)象辖佣，和store對(duì)象的方法屬性都一樣的對(duì)象；
addAction(context){
setTimeout(()=>{
//通過(guò)context對(duì)象宵溅，可以使用commit方法凌简，參數(shù)輸入mutations中的函數(shù)名
? ? ? ? context.commit('addIncrement');
//這里調(diào)用了下面的函數(shù)
? ? ? ? context.dispatch('testAction',{test:'測(cè)試'});
},1000);
? ? },
? ? testAction(context,obj){//傳值正常傳
//可以打印出'測(cè)試的數(shù)據(jù)'
console.log(obj.test);
}
? }
這里說(shuō)明一下actions傳值的另一種方法
actions:{
? ? //函數(shù)名隨便寫(xiě)，參數(shù)是一個(gè)對(duì)象恃逻，和store對(duì)象的方法屬性都一樣的對(duì)象雏搂；
/*
這個(gè)context參數(shù)，可以使用es6的結(jié)構(gòu)賦值方法寫(xiě)
? ? ? 直接傳一個(gè)對(duì)象形式{commit,dispatch} 把需要的方法直接寫(xiě)到里面寇损，不用傳context去調(diào)用對(duì)應(yīng)的方法
? ? ? 這樣寫(xiě)更方便凸郑。
es6的結(jié)構(gòu)賦值：把一個(gè)對(duì)象里面的屬性，直接放到對(duì)象中矛市；
*/
addAction({commit,dispatch}){
setTimeout(()=>{
//通過(guò)context對(duì)象芙沥，可以使用commit方法，參數(shù)輸入mutations中的函數(shù)名
? ? ? ? commit('addIncrement');
dispatch('testAction',{test:'測(cè)試'});
},1000);
? ? },
? ? testAction(context,obj){
console.log(obj.test);
}
? }
getter計(jì)算狀態(tài)
作用：關(guān)于狀態(tài)數(shù)據(jù)中浊吏，一些對(duì)數(shù)據(jù)的處理(判斷/過(guò)濾)等而昨，都在getter屬性中處理。
寫(xiě)法：在vuex對(duì)象中寫(xiě)
getters:{
filterCount(state){//state就是狀態(tài)對(duì)象
? ? ? //在這里做count的判斷
? ? ? return state.count >= 120 ? 120 : state.count;
}
? }
調(diào)用方法：
computed:{//在計(jì)算屬性中取vuex定義的狀態(tài)數(shù)據(jù)
? ? ? ? ? //getter的調(diào)用方法找田，就是在計(jì)算屬性中歌憨，另定義一個(gè)函數(shù)，在這個(gè)函數(shù)中調(diào)用getter中判斷過(guò)的值
? ? ? ? ? num2(){
//$store中有g(shù)etters屬性墩衙，可以獲取getter中的filterCount的值
? ? ? ? ? ? ? return this.$store.getters.filterCount;
}
}
HTML顯示方法：
Vuex輔助函數(shù)
mapState：
????????當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)時(shí)候务嫡，將這些狀態(tài)都聲明為計(jì)算屬性會(huì)有些重復(fù)和冗余。為了解決這個(gè)問(wèn)題漆改，我們可以使用 mapState 輔助函數(shù)幫助我們生成計(jì)算屬性心铃。
mapGetters：
? ???? 輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計(jì)算屬性。
mapMutations：
? ???? 將 store 中的 mutations 映射到局部計(jì)算屬性挫剑。
mapActions：
? ???? 將 store 中的 actions 映射到局部計(jì)算屬性去扣。
