您现在的位置是:主页 > Web前端技术 > Web前端技术

vue的辅助函数怎么使用

IDCBT2021-12-24服务器技术人已围观

简介本篇内容主要讲解“vue的辅助函数怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue的辅助函数怎么使用”吧! vue的辅助

本篇内容主要讲解“vue的辅助函数怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue的辅助函数怎么使用”吧!

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'

    使用方式

    <template>
      <div id="example">
        <button @click="decrement">-</button>
        {{count}}
        {{dataCount}}
        <button @click="increment">+</button>
        <div>{{sex}}</div>
        <div>{{from}}</div>
        <div>{{myCmpted}}</div>
      </div>
    </template>
    <script>
    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')
        }
      }
    }
    </script>

    标签:

    很赞哦! ()

本栏推荐