Was sind die Hilfsfunktionen von Vue?

Die Hilfsfunktionen von

vue sind: 1. MapState, das den Zustandswert der globalen Zustandsverwaltung auf die berechnete Eigenschaft der Komponente abbildet; 2. MapGetters, das den Getter-Wert der globalen Zustandsverwaltung auf die berechnete Eigenschaft der Komponente abbildet; .mapActions; 4.mapMutations.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

1.Vues Hilfsfunktionen

mapState, mapGetters, mapActions, mapMutations

• mapState ordnet den Zustandswert der globalen Zustandsverwaltung der berechneten Eigenschaft der Komponente zu.

• mapGetters ordnet den Getter-Wert des globalen Zustands zu Management Zu den berechneten Eigenschaften der Komponente. MapMutation ordnet den Wert der Mutation der Methode zu /code >Was ist das? Die offizielle Erklärung lautet:

• Wenn eine Komponente mehrere Zustände erhalten muss, wäre es etwas eintönig und überflüssig, diese Zustände als berechnete Eigenschaften zu deklarieren. Um dieses Problem zu lösen, können wir die Hilfsfunktion „mapState“ verwenden, um berechnete Eigenschaften zu generieren, sodass Sie weniger Tasten drücken müssen.

Als Sie diese Erklärung zum ersten Mal sahen, hatten Sie möglicherweise das Gefühl, dass sie sehr leer und schwer zu verstehen war . Was generiert eine berechnete Eigenschaft? Weniger Tasten drücken? ? ?

• mapState ist syntaktischer Zucker für Staat. Mein Verständnis von syntaktischem Zucker ist, dass ich eine Operation bereits sehr gut beherrsche, und es gibt kein Problem mit dieser Operation Der „bessere, bessere Betrieb“? , nach einer Weile riecht es wirklich gut!

  3 So verwenden Sie

Bevor Sie mapState verwenden, müssen Sie diese Hilfsfunktion importieren.

import { mapState } from 'vuex'

Verwendung

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

berechnet kann den Rückgabewert der Funktion mapState empfangen. Sie können drei Methoden im Code verwenden, um ihn im store< zu empfangen /code > Wert, Einzelheiten finden Sie in den Kommentaren. <br/><strong>Was passiert, wenn ich mapState später verwenden möchte? Es ist eigentlich ganz einfach: <code>mapState是什么？官方的解释是:

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

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

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

3.如何使用

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

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

使用方式

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

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

rrreee

4.对象展开运算符

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

rrreee

mapState、mapGetters、mapActions、mapMutationsrrreee

4. Objekterweiterungsoperator

… MapState ist keine Erweiterung von MapState, sondern… eine Erweiterung des Objekterweiterungsoperators.

🎜rrreee🎜Die Verwendungsmethoden von mapState, mapGetters, mapActions und mapMutations sind ähnlich. . . 🎜🎜【Verwandte Empfehlung: „🎜vue.js Tutorial🎜“】🎜

Das obige ist der detaillierte Inhalt vonWas sind die Hilfsfunktionen von Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!