mapState，mapGetters,mapMutations,mapActions，這些輔助函數(shù)主要是為了避免在組件調用代碼中寫太多的部分壹置，用最簡單的方式來調用Vuex科汗。
一個簡單的栗子：
首先看看store的結構:
store結構.png
index.js：
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import user from './module/user'
Vue.use(Vuex)
export default new Vuex.Store({
state,
mutations,
actions,
modules: {
user
}
})
user.js:
const state = {
mytest: 'this is user.js '
}
const mutations = {
//
}
const actions = {
//
}
const getters = {
doSome: state => {
return state.mytest.split(' ')
}
}
export default {
state,
mutations,
actions,
getters
}
在組件或頁面中調用:
export default {
mounted() {
// 使用map輔助函數(shù)：
console.log(this.user.mytest)
console.log(this.test)
// 不使用map輔助函數(shù)：
console.log(this.$store.state.user.mytest)
console.log(this.$store.getters.test)
},
computed: {
...mapGetters({
'test': 'doSome'
}),
...mapState({
'user': 'user'
})
}
}
mapMutations,mapActions 輔助函數(shù)的使用都是類似脐嫂。
