vue前端开发辅助函数状态管理的示例分析

这篇文章主要介绍vue前端开发辅助函数状态管理的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

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是在引用组件中使用的别名  })}

mapGetters

mapGetters 辅助函数仅仅是将 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两个辅助函数，代码如下

建议使用map时，增加别名，这样就和stores里面内容脱耦。在CountChange使用了mapMutations和mapActions两个辅助函数，代码如下

同样给stores中的方法制定别名，当需要传参数时，通过别名将参数传递给actions或mutations。如："addNum({res: parseInt(paramValue)})"中传送了一个对象{res：''}

以上是"vue前端开发辅助函数状态管理的示例分析"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！