What are the auxiliary functions of vue?

Vue’s auxiliary functions are: 1. mapState, which maps the state value of global state management to the calculated property of the component; 2. mapGetters, which maps the getters value of global state management to the calculated property of the component; 3. mapActions; 4. mapMutations.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

1.Vue’s auxiliary functions

mapState, mapGetters, mapActions, mapMutations

• mapState manages the state of the global state The value is mapped to the calculated property of the component

• mapGetters Maps the getters value of global state management to the calculated property of the component

• mapMutation Maps the value of mutation Map to the method

• mapActions Map the values ​​​​in the actions to the method

2.mapState auxiliary function

# What is ##mapState? The official explanation is:

When a component needs to obtain multiple states, it will be somewhat repetitive and redundant to declare these states as computed properties. In order to solve this problem, we can use the mapState auxiliary function to help us generate calculated properties, allowing you to press fewer keys

When you first saw this explanation, you may have felt that it was very empty and difficult to understand. What is generating a computed property? Press fewer keys? ? ?

mapState is syntactic sugar for state. What is syntactic sugar? My understanding of syntactic sugar is that I am already very proficient in an operation, and there are no problems with this operation. Why use the so-called "better, better operation"? , after using it for a while, it smells really good!

3. How to use

Before using mapState, you must import this auxiliary function.

import { mapState } from 'vuex'

How to use

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

computedYou can receive the return value of the mapState function. You can use three methods in the code to receive it## The value of in #store can be found in the comments. What if I want to use mapState later? It's actually very simple

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

4. Object expansion operator

...mapState is not an extension of mapState, but...an expansion of the object expansion operator. The usage methods of

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

mapState

, mapGetters, mapActions, and mapMutations are similar. . . [Related recommendations: "

vue.js Tutorial

"]

The above is the detailed content of What are the auxiliary functions of vue?. For more information, please follow other related articles on the PHP Chinese website!