vue前端开发辅助函数状态管理详解示例

• mapstate
• mapgetters
• mapmutations
• mapactions

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

<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辅助函数状态管理的资料请关注其它相关文章！