Heim > Artikel > Web-Frontend > 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.
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:
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!
import { mapState } from 'vuex'
{{count}} {{dataCount}}<script> import { mapState } from &#39;vuex&#39; 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>{{sex}}{{from}}{{myCmpted}}
berechnet
kann den Rückgabewert der Funktion mapState
empfangen. Sie können drei Methoden im Code verwenden, um ihn im store 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的语法糖,什么是语法糖?我对语法糖的理解就是,我明明已经对一种操作很熟练了,并且这种操作也不存在什么问题,为什么要用所谓的"更好,更好的操作"?,用了一段时间后,真香!
在使用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…mapState并不是mapState的扩展,而是…对象展开符的扩展 。
mapState
、mapGetters
、mapActions
、mapMutations
rrreee
… MapState ist keine Erweiterung von MapState, sondern… eine Erweiterung des Objekterweiterungsoperators.
🎜rrreee🎜Die Verwendungsmethoden vonmapState
, 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!