vue的辅助函数有哪些

PHP中文网 • 2025年3月11日 21:57:09 • 编程技术 • 阅读 3

vue的辅助函数有：1、mapState，将全局状态管理的state值映射到组件的计算属性；2、mapGetters，将全局状态管理的getters值映射到组件的计算属性；3、mapActions；4、mapMutations。

本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。

1.Vue的辅助函数

mapState、mapGetters、mapActions、mapMutations

mapState 将全局状态管理的state值映射到组件的计算属性

mapGetters 将全局状态管理的getters值映射到组件的计算属性

立即学习“前端免费学习笔记（深入）”；

mapMutation 将mutation的值映射到方法里

mapActions 将actions里的值映射到方法里

2.mapState 辅助函数

mapState是什么？官方的解释是:

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键

当初在看到这个解释的时候可能觉得非常空洞，难以理解。生成计算属性是什么？少按几次键？？？

mapState是state的语法糖,什么是语法糖?我对语法糖的理解就是,我明明已经对一种操作很熟练了,并且这种操作也不存在什么问题,为什么要用所谓的”更好,更好的操作”？,用了一段时间后,真香!

3.如何使用

在使用mapState之前,要导入这个辅助函数。

import { mapState } from 'vuex'

登录后复制

使用方式

          {{count}}    {{dataCount}}        {{sex}}
    {{from}}
    {{myCmpted}}
  
import { mapState } from 'vuex'export default {  data () {    return {      str: '国籍',      dataCount: this.$store.state.count    }  },  computed: mapState({    count: 'count', // 第一种写法    sex: (state) => state.sex, // 第二种写法    from: function (state) { // 用普通函数this指向vue实例,要注意      return this.str + ':' + state.from    },    // 注意下面的写法看起来和上面相同,事实上箭头函数的this指针并没有指向vue实例,因此不要滥用箭头函数    // from: (state) => this.str + ':' + state.from    myCmpted: function () {      // 这里不需要state,测试一下computed的原有用法      return '测试' + this.str    }  }),  methods: {    increment () {      this.$store.commit('increment')    },    decrement () {      this.$store.commit('decrement')    }  }}

登录后复制

computed可以接收mapState函数的返回值,你可以用代码中的三种方式去接收store中的值,具体可以看注释。
如果我在后面想使用mapState怎么办？其实很简单

//之前的computedcomputed:{    fn1(){ return ...},    fn2(){ return ...},    fn3(){ return ...}    ........}//引入mapState辅助函数之后 computed:mapState({    //先复制粘贴    fn1(){ return ...},    fn2(){ return ...},    fn3(){ return ...}    ......    //再维护vuex    count:'count'    })

登录后复制

4.对象展开运算符

…mapState并不是mapState的扩展,而是…对象展开符的扩展。

//之前的computedcomputed:{    fn1(){ return ...},    fn2(){ return ...},    fn3(){ return ...}    ........}//引入mapState辅助函数之后 computed:{    //原来的继续保留    fn1(){ return ...},    fn2(){ return ...},    fn3(){ return ...}    ......    //再维护vuex    ...mapState({  //这里的...不是省略号了,是对象扩展符        count:'count'    })

登录后复制

mapState、mapGetters、mapActions、mapMutations的使用方法大同小异。。。

【相关推荐：《vue.js教程》】

以上就是vue的辅助函数有哪些的详细内容，更多请关注【创想鸟】其它相关文章！

发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2941702.html