vuex有五個核心概念:
state, getters, mutations, actions, modules。
1.state:vuex的基本數據,用來存儲變量
// state存儲基本數據 state: { userId: '', }
我們可以通過Vue的Computed獲得Vuex的state
// An highlighted block const store = new Vuex.Store({ state: { count:0 } }) const app = new Vue({ //.. store, computed: { count: function(){ return this.$store.state.count } }, //.. })
mapState輔助函數
當一個組件需要獲取多個狀態時候,將這些狀態都聲明為計算屬性會有些重復和冗余。為了解決這個問題,我們可以使用 mapState 輔助函數幫助我們生成計算屬性,讓你少按幾次鍵。
// 映射計算屬性 computed: mapState([ // 映射 this.count 為 store.state.count 'count' ])
2. geeter:從基本數據(state)派生的數據,相當於state的計算屬性,具有返回值的方法
// getter getter: { userIdDouble: function(state){ return state.userId * 2 }
在vue中使用 this.$store.getters.userIdDouble
與state一樣,我們也可以通過Vue的Computed獲得Vuex的getters。
getters接收state作為其第一個參數,接受其他 getters 作為第二個參數,如不需要,第二個參數可以省略如下例子:
const store = new Vuex.Store({ state: { count:0 }, getters: { // 單個參數 countDouble: function(state){ return state.count * 2 }, // 兩個參數 countDoubleAndDouble: function(state, getters) { return getters.countDouble * 2 } } })
mapGetters 輔助函數
與state一樣,我們也可以通過Vue的Computed獲得Vuex的getters
const app = new Vue({ //.. store, computed: { count: function(){ return this.$store.state.count }, countDouble: function(){ return this.$store.getters.countDouble }, countDoubleAndDouble: function(){ return this.$store.getters.countDoubleAndDouble } }, //.. })
3. mutation:提交更新數據的方法,必須是同步的(如果需要異步使用action)。每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。提交mutation是更改Vuex中的store中的狀態的唯一方法。
mutation必須是同步的,如果要異步需要使用action。
每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是我們實際進行狀態更改的地方,並且它會接受 state 作為第一個參數,提交載荷作為第二個參數。(提交荷載在大多數情況下應該是一個對象),提交荷載也可以省略的
// mutations mutations: { SET_USER: (state, userId) => { state.userId = userId }, },
commit:同步操作,寫法: this.s t o r e . c o m m i t ( ‘ m u t a t i o n s 方 法 名 ’ , 值 ) t h i s . store.commit(‘mutations方法名’,值) this.store.commit(‘mutations方法名’,值)this.store.commit(‘SET_USER’,‘123456’)
使用mapMutations–代替 $store.commit()- 傳參的時候直接在行內寫參數就可以了-
mapMutations 輔助函數
與其他輔助函數類似,你可以在組件中使用 this.$store.commit(‘xxx’) 提交 mutation,或者使用 mapMutations 輔助函數將組件中的 methods 映射為 store.commit 調用(需要在根節點注入 store)。
// import { mapMutations } from 'vuex' export default { //.. methods: { ...mapMutations([ 'increment' // 映射 this.increment() 為 this.$store.commit('increment') ]), ...mapMutations({ add: 'increment' // 映射 this.add() 為 this.$store.commit('increment') }) } }
4. action:和mutation的功能大致相同,不同之處在於 ==》1. Action 提交的是 mutation,而不是直接變更狀態。 2. Action 可以包含任意異步操作。Action 類似於 mutation,不同在於:Action 提交的是 mutation,而不是直接變更狀態。Action 可以包含任意異步操作。
// actions actions: { // {} 是es6中解構,把對象解構成屬性 login({ commit }, value) { commit('SET_USER', value) // commit('SET_TOKEN', value2) }, }
dispatch:異步操作,寫法: this.$store.dispatch(‘mutations方法名’,值)
mapActions輔助函數
你在組件中使用 this.$store.dispatch(‘xxx’) 分發 action,或者使用 mapActions 輔助函數將組件的 methods 映射為 store.dispatch 調用(需要先在根節點注入 store):
// An highlighted block import { mapActions } from 'vuex' export default { //.. methods: { ...mapActions([ 'incrementN' //映射 this.incrementN() 為 this.$store.dispatch('incrementN') ]), ...mapActions({ add: 'incrementN' //映射 this.add() 為 this.$store.dispatch('incrementN') }) } }
5. modules:模塊化vuex,可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結構非常清晰,方便管理。
簡單來說就是可以把以上的 state、mutation、action、getters 整合成一個user.js,然后放到store.js里面