• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
vue前端开发层次嵌套组件的通信详解发布时间:2022-02-05
下一篇:
js实现简易购物车功能发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap