Vuex學(xué)習(xí)總結(jié)State,Mutation,Action,Getter
Vue 說(shuō)白了就是一個(gè)租賃倉(cāng)庫(kù)，保存了一些數(shù)據(jù)，這些數(shù)據(jù)可以被大家公用，哪個(gè)組件想要調(diào)用就引入即可，
1.State
什么是vuex-----state?
state及類似與組件中的data數(shù)據(jù)春感，既然類似為何還要寫(xiě)在vuex中的state里面呢？
組件中的data數(shù)據(jù)僅僅是局部的適用于該組件中的使用虏缸，其他的組件不能獲取使用鲫懒， 而vuex里面的state數(shù)據(jù)是全局的可以再任何一個(gè)組件使用，但是我們也可以在單個(gè)組件中修改這個(gè)全局的store state數(shù)據(jù)刽辙，
組件中如何使用state窥岩？
首先我們需要把 vuex全局引用，main.js扫倡，這里是建立單獨(dú)文件store故需要引入
//main.js文件
import router from'./router';
import store from'./store';new Vue({? ? router,? ? store})
new Vue({ router, store })
stat{{a}}或者{{A}}e在組件中使用需要在計(jì)算屬性接收一下(暫且就理解為是接收吧)
{{a}}或者{{A}}
{{a}}或者{{A}}<template>{{a}}或者{{A}}</template>
import {mapState} from'vuex'
export default {
????????computed:mapState({'a':A,'b':B})
}
{{a}}或者{{A}}
或者
computed:mapState(['A','A'])
mapstate 即可以接受對(duì)象谦秧，也可以接受數(shù)組竟纳。最終返回的是一個(gè)對(duì)象。
2.Mutation
mutations 類似于組件里面的methods在mutations里面可以對(duì)state的數(shù)據(jù)進(jìn)行修改疚鲤，比如
state:{
? ? num:[1,2,3,4]
},
mutaions:{
? ? numChange(state){
? ? ? ? state.num[0]++
? ? }
}
我們不嫩能夠直接調(diào)用一個(gè)mutation handler這個(gè)選項(xiàng)更像是時(shí)間注冊(cè)锥累，“當(dāng)觸發(fā)一個(gè)類型為incroment”的mutation時(shí)2，調(diào)用此函數(shù)集歇，‘要喚醒一個(gè)mutation handler’,你需要以相應(yīng)的type調(diào)用store.commit方法：
store.commit('numChange')
3.Action
action的作用
actions 類似于mutations 大體歸類到事件桶略；
mutation像事件注冊(cè)，需要相應(yīng)的條件觸發(fā)诲宇，action像是管理觸發(fā)條件的际歼；例子如下
Action事件怎么觸發(fā)？
action 在組件中被觸發(fā)姑蓝，分發(fā)action鹅心，或者使用mapActions輔助函數(shù)將組件的methods映射為
store.dispatch調(diào)用
4.Getter
getter存放公共函數(shù)供組件調(diào)用，類似于組件中的過(guò)濾函數(shù)computed或者filters,組件中的computed和filters只能供給單個(gè)組件自己調(diào)用不能被多個(gè)組件公用纺荧，
?getter不僅可以接收state也可以接收 其他的 getter 作為參數(shù)旭愧！
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)宙暇，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處输枯。
