Quelles sont les fonctions auxiliaires de vue ?

Les fonctions auxiliaires de

vue sont : 1. mapState, qui mappe la valeur d'état de la gestion globale de l'état à la propriété calculée du composant ; 2. mapGetters, qui mappe la valeur des getters de la gestion globale de l'état à la propriété calculée du composant ; . mapActions ; 4. mapMutations.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Fonctions auxiliaires de 1.Vue

mapState, mapGetters, mapActions, mapMutations

• mapState mappe la valeur d'état de la gestion globale de l'état à la propriété calculée du composant

• mapGetters mappe la valeur des getters de l'état global gestion Aux propriétés calculées du composant

• mapMutation mappe la valeur de la mutation à la méthode

• mapActions mappe la valeur des actions à la méthode

2.mapState fonction auxiliaire

mapStateQu'est-ce que c'est ? L'explication officielle est la suivante : <code>mapState是什么？官方的解释是:

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

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

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

3.如何使用

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

import { mapState } from 'vuex'

使用方式

<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>

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

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

4.对象展开运算符

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

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

mapState、mapGetters、mapActions、mapMutations

Lorsqu'un composant doit obtenir plusieurs états, il serait quelque peu répétitif et redondant de déclarer ces états comme propriétés calculées. Afin de résoudre ce problème, nous pouvons utiliser la fonction auxiliaire mapState pour nous aider à générer des propriétés calculées, vous permettant d'appuyer sur moins de touches.

Lorsque vous avez vu cette explication pour la première fois, vous avez peut-être eu l'impression qu'elle était très vide et difficile à comprendre. . Qu'est-ce que générer une propriété calculée ? Appuyer sur moins de touches ? ? ? 🎜🎜mapState est un sucre syntaxique pour l'état. Qu'est-ce que le sucre syntaxique ? Ma compréhension du sucre syntaxique est que je suis déjà très compétent dans une opération et qu'il n'y a aucun problème avec cette opération. du sucre syntaxique ? La « meilleure, meilleure opération » ? , après l'avoir utilisé pendant un moment, ça sent vraiment bon !🎜

3 Comment utiliser

🎜Avant d'utiliser mapState, vous devez importer cette fonction auxiliaire. 🎜rrreee🎜Usage🎜rrreee🎜computed peut recevoir la valeur de retour de la fonction mapState Vous pouvez utiliser trois méthodes dans le code pour la recevoir dans le store<.> valeur, veuillez consulter les commentaires pour plus de détails. <br><strong>Que faire si je souhaite utiliser mapState plus tard ? C'est en fait très simple🎜rrreee🎜4. Opérateur d'expansion d'objet🎜🎜🎜… mapState n'est pas une extension de mapState, mais… une extension de l'opérateur d'expansion d'objet. 🎜🎜rrreee🎜Les méthodes d'utilisation de <code>mapState, mapGetters, mapActions et mapMutations sont similaires. . . 🎜🎜【Recommandation associée : "🎜Tutoriel vue.js🎜"】🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!