|
mapState当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 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是在引用组件中使用的别名 })}
mapGettersmapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性，与state类似。由计算函数代码简化为； import { mapGetters } from 'vuex'export default { // ... computed: { // 使用对象展开运算符将 getters 混入 computed 对象中 ...mapGetters([ 'countDouble', 'CountDoubleAndDouble', //.. ]) }}mapGetters也可以使用别名。
mapMutations使用 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使用 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" style="background-color: bisque;"> <p>以下是使用computed直接获取stores中的状态数据，状态数据发生变化时，同步刷新</p> <h1>使用computed接收 state:{{ computedState }}</h1> <h1>使用computed接收Getters:{{ computedGetters }}</h1> </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：‘'}
小结辅助函数本身没有新的含义，主要用于简化State、Getters、Mutations、Actions使用时的代码。 以上就是vue前端开发辅助函数状态管理详解示例的详细内容，更多关于vue辅助函数状态管理的资料请关注51zixue.net其它相关文章！
下载地址:
vue前端开发层次嵌套组件的通信详解
js实现简易购物车功能 |
