mapState
import { mapState } from 'vuex'
export default {
? // ...
? computed:{
? ? ...mapState({
? ? ? ? // 箭頭函數(shù)可使代碼更簡(jiǎn)練
? ? ? ? count: state => state.count,
? ? ? ? // 傳字符串參數(shù) 'count' 等同于 `state => state.count`
? ? ? ? countAlias: 'count',
? ? ? ? // 為了能夠使用 `this` 獲取局部狀態(tài)，必須使用常規(guī)函數(shù)
? ? ? ? countPlusLocalState (state) {
? ? ? ? ? ? return state.count + this.localCount
? ? ? ? }
? })
? }
}
定義的屬性名與state中的名稱(chēng)相同時(shí)，可以傳入一個(gè)數(shù)組
//定義state
const state={
? ? count:1,
}
//在組件中使用輔助函數(shù)
computed:{
? ? ...mapState(['count'])
}
mapGetters
computed:{
? ? ...mapGetters({
? ? ? // 把 `this.doneCount` 映射為 `this.$store.getters.doneTodosCount`
? ? ? doneCount: 'doneTodosCount'
? ? })
}
當(dāng)屬性名與getters中定義的相同時(shí)，可以傳入一個(gè)數(shù)組
computed:{
? computed: {
? // 使用對(duì)象展開(kāi)運(yùn)算符將 getter 混入 computed 對(duì)象中
? ? ...mapGetters([
? ? ? 'doneTodosCount',
? ? ? 'anotherGetter',
? ? ? // ...
? ? ])
? }
}
總結(jié)：
mapState與mapGetters都用computed來(lái)進(jìn)行映射
在組件中映射完成后，通過(guò)this.映射屬性名進(jìn)行使用
mapMutations
methods:{
? ? ...mapMutations({
? ? ? ? add: 'increment' // 將 `this.add()` 映射為 `this.$store.commit('increment')`
? ? })
}
當(dāng)屬性名與mapMutatios中定義的相同時(shí)，可以傳入一個(gè)數(shù)組
methods:{
? ? ...mapMutations([
? ? ? ? 'increment', // 將 `this.increment()` 映射為 `this.$store.commit('increment')`
? ? ? ? // `mapMutations` 也支持載荷：
? ? ? ? 'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.commit('incrementBy', amount)`
? ? ]),
}
mapActios
mathods:{
? ? ...mapActions({
? ? ? ? add: 'increment' // 將 `this.add()` 映射為 `this.$store.dispatch('increment')`
? ? })
}
當(dāng)屬性名與mapActios中定義的相同時(shí)，可以傳入一個(gè)數(shù)組
methods:{
? ? ...mapActions([
? ? ? ? 'increment', // 將 `this.increment()` 映射為 `this.$store.dispatch('increment')`
? ? ? ? // `mapActions` 也支持載荷：
? ? ? ? 'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.dispatch('incrementBy', amount)`
? ? ]),
}
總結(jié)
mapMutations與mapActios都在methods中進(jìn)行映射
映射之后變成一個(gè)方法
多個(gè)modules
在不使用輔助函數(shù)的時(shí)候，
this.$store.commit('app/addCount')
使用輔助函數(shù)，輔助函數(shù)的第一個(gè)參數(shù)給定命名空間的路徑
computed: {
? ...mapState('some/nested/module', {
? ? a: state => state.a,
? ? b: state => state.b
? })
},
methods: {
? ...mapActions('some/nested/module', [
? ? 'foo', // -> this.foo()
? ? 'bar' // -> this.bar()
? ])
}
或者使用 createNamespacedHelpers函數(shù)來(lái)創(chuàng)建一個(gè)基于命名空間的輔助函數(shù)
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('some/nested/module') //給定路徑
//使用方法與之前相同
export default {
? computed: {
? ? // 在 `some/nested/module` 中查找
? ? ...mapState({
? ? ? a: state => state.a,
? ? ? b: state => state.b
? ? })
? },
? methods: {
? ? // 在 `some/nested/module` 中查找
? ? ...mapActions([
? ? ? 'foo',
? ? ? 'bar'
? ? ])
? }
}
