Apakah fungsi bantu vue?

Fungsi tambahan Vue ialah: 1. mapState, yang memetakan nilai keadaan pengurusan keadaan global kepada sifat terkira komponen 2. mapGetters, yang memetakan nilai getter pengurusan keadaan global kepada harta terkira komponen; 3. mapActions;

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

1.Fungsi tambahan Vue

mapState, mapGetters, mapActions, mapMutations

• mapState menguruskan keadaan global negeri Nilai dipetakan pada sifat terkira komponen

• mapGetters memetakan nilai getter pengurusan keadaan global kepada sifat terkira komponen

• mapMutation memetakan nilai mutasi Peta kepada kaedah

• mapActions Petakan nilai dalam tindakan kepada kaedah

2.mapState fungsi bantu

mapStateApa itu? Penjelasan rasmi ialah:

Apabila komponen perlu mendapatkan berbilang keadaan, ia akan menjadi agak berulang dan berlebihan untuk mengisytiharkan keadaan ini sebagai sifat yang dikira. Untuk menyelesaikan masalah ini, kami boleh menggunakan fungsi tambahan mapState untuk membantu kami menjana sifat yang dikira, membolehkan anda menekan lebih sedikit kekunci

Apabila anda mula-mula melihat penjelasan ini, anda mungkin merasakan bahawa ia adalah sangat kosong dan sukar untuk difahami. Apakah yang menjana harta yang dikira? Tekan lebih sedikit kekunci? ? ?

mapState ialah gula sintaksis untuk keadaan Apakah gula sintaksis saya ialah saya sudah sangat mahir dalam operasi, dan tiada masalah dengan operasi ini -dipanggil "operasi yang lebih baik, lebih baik"? , selepas menggunakannya untuk seketika, baunya benar-benar harum!

Penggunaan

import { mapState } from 'vuex'

boleh menerima nilai pulangan fungsi

Anda boleh menggunakan tiga kaedah dalam kod untuk menerima nilai

. Lihat komen untuk butiran.

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

Bagaimana jika saya mahu menggunakan mapState nanti? Malah, ia sangat mudah computedmapStatestore中
4 Operator pengembangan objek

...mapState bukanlah pengembangan mapState, tetapi pengembangan dari.. .pengendali pengembangan objek. Kaedah penggunaan

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

,

,

dan

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

adalah serupa. . .

mapState[Cadangan berkaitan: "mapGetterstutorial vue.jsmapActions"]mapMutations

Atas ialah kandungan terperinci Apakah fungsi bantu vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!