这篇文章主要介绍vue前端开发辅助函数状态管理的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性。不使用mapState时，获取对象状态，通常放在使用组件的computes属性中，使用方式为：
计算
安全
数据库
网络和加速
企业服务
//....
computed: {
count: function(){
return this.$store.state.count
}
}
//....使用mapState可以简化为：
import { mapState } from 'vuex' //引入mapState对象
export default {
// ...
computed: mapState({
// 箭头函数可使代码更简练
count: state => state.count,
})
}
或者
import { mapState } from 'vuex' //引入mapState对象
export default {
// ...
computed: mapState({
'count', //与state名称一致
countAlias：'count' //countAlias是在引用组件中使用的别名
})
}mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性，与state类似。由计算函数代码简化为；
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getters 混入 computed 对象中
...mapGetters([
'countDouble',
'CountDoubleAndDouble',
//..
])
}
}mapGetters也可以使用别名。
使用 mapMutations 辅助函数将组件中的methods映射为store.commit调用，简化后代码为：
import { mapMutations } from 'vuex'
export default {
//..
methods: {
...mapMutations([
'increment' // 映射 this.increment() 为 this.$store.commit('increment')
]),
...mapMutations({
add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
})
}
}使用 mapActions 辅助函数将组件的methods映射为store.dispatch调用，简化后代码为：
import { mapActions } from 'vuex'
export default {
//..
methods: {
...mapActions([
'incrementN' //映射 this.incrementN() 为 this.$store.dispatch('incrementN')
]),
...mapActions({
add: 'incrementN' //映射 this.add() 为 this.$store.dispatch('incrementN')
})
}
}沿用vue状态管理（二）中的示例，使用辅助函数完成。在CountChange和ComputeShow两个组件使用了辅助函数，其余代码无需改动。
在ComputeShow使用了mapState，mapGetters两个辅助函数，代码如下
<template>
<div align="center" >
<p>以下是使用computed直接获取stores中的状态数据，状态数据发生变化时，同步刷新</p>
<h2>使用computed接收 state:{{ computedState }}</h2>
<h2>使用computed接收Getters:{{ computedGetters }}</h2>
</div>
</template>
<script>
import { mapState,mapGetters } from 'vuex' //引入mapState,mapGetters对象
export default {
name: 'ComputeShow',
computed:{
...mapState({
computedState:'count' //别名：computedState
}),
...mapGetters({
computedGetters:'getChangeValue' //别名：computedGetters
})
}
}
</script>
<style>
</style>建议使用map时，增加别名，这样就和stores里面内容脱耦。在CountChange使用了mapMutations和mapActions两个辅助函数，代码如下
<template>
<div align="center">
<input type="number" v-model="paramValue" />
<button @click="addNum({res: parseInt(paramValue)})">+增加</button>
<button @click="subNum">-减少</button>
</div>
</template>
<script>
import {
mapMutations,
mapActions
} from 'vuex' //引入mapMutations、mapActions对象
export default {
name: 'CountChange',
data() {
return {
paramValue: 1,
}
},
methods: {
...mapMutations({
subNum: 'sub' //增加别名subNum
}),
...mapActions({
addNum: 'increment' //映射 this.incrementN() 为 this.$store.dispatch('incrementN')
})
}
}
</script>
<style>
</style>同样给stores中的方法制定别名，当需要传参数时，通过别名将参数传递给actions或mutations。如："addNum({res: parseInt(paramValue)})"中传送了一个对象{res：‘'}
以上是“vue前端开发辅助函数状态管理的示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
