本文章介绍vuex
中辅助函数的使用,如果想学习vuex
基础的小伙伴可以点击此链接进入上一篇文章
一、为什么需要使用辅助函数
当一个组件需要对多个状态进行操作的时候,代码会有些重复和冗余,我们可以使用辅助函数帮助我们用极少的代码解决这些问题。
注意:使用mapActions、mapMutations
时需要在template
中传参
累加器案例
展示效果:
template代码:
<div>
累加器:{{sum}}
*100后={{sumHandler}} <br>
<select v-model="num">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="add(num)">普通加</button>
<button @click="addSync(num)">延时加</button>
</div>
store
中index.js
代码:
export default new Vuex.Store({
state: {
sum: 0,
},
mutations: {
add(state,num) {
state.sum += num*1
}
},
actions: {
addSync(store,num) {
setTimeout(() => {
store.commit('add',num)
},1000)
}
},
getters: {
sumHandler(state) {
return state.sum*100
}
},
})
二、使用mapState
组件中导入辅助函数:
import { mapState } from 'vuex'
简写形式:
export default {
computed: ...mapState(["sum"]),
}
等同于以下代码:
export default {
computed: sum(){return this.$store.state.sum},
}
三、mapGetters
组件中导入辅助函数:
import { mapGetters } from 'vuex'
简写形式:
export default {
computed: ...mapGetters(['sumHandler']),
}
等同于以下代码:
export default {
computed: sum(){return this.$store.getters.sumHandler},
}
四、mapMutations
组件中导入辅助函数:
import { mapMutations } from 'vuex'
简写形式:
export default {
methods: ...mapMutations(['add']),
}
等同于以下代码:
export default {
methods: add(){return this.$store.commit('add',this.num)},
}
五、mapActions
组件中导入辅助函数:
import { mapActions } from 'vuex'
简写形式:
export default {
methods: ...mapActions(['addSync']),
}
等同于以下代码:
export default {
methods: addSync(){return this.$store.dispatch('addSync',this.num)},
}