Organ dalaman Vuex terdiri daripada lima bahagian: Keadaan, Pengambil, Mutasi, Tindakan dan Modul. Artikel ini mula-mula akan memberi anda pemahaman yang mendalam tentang State dan Getter dalam Vuex. Saya harap ia akan membantu anda!

Vuex_State

Vuex ialah alat pengurusan keadaan untuk vue, untuk menjadikannya lebih mudah untuk berbilang komponen berkongsi keadaan. [Cadangan berkaitan: "Tutorial vue.js"]

Pasang

npm install vuex --save复制代码

Gunakan

import Vue from 'vue';import Vuex from 'vuex';

Vue.use(Vuex);const store = new Vuex.Store({  state: {    count: 0
  }
})new Vue({
  store,
})

Negeri

Pokok keadaan tunggal mengandungi semua keadaan peringkat aplikasi menggunakan satu objek.

Dapatkan keadaan Vuex dalam komponen Vue

Vuex menyediakan mekanisme untuk "menyuntik" keadaan daripada komponen ke dalam setiap subkomponen melalui pilihan kedai (panggil Vue.use(Vuex )).

Dengan mendaftarkan pilihan kedai dalam tika akar, tika kedai akan disuntik ke dalam semua subkomponen di bawah komponen akar, dan subkomponen boleh diakses melalui ini.$store.

<div class="home">
  {{ $store.state.count }}</div>复制代码

Fungsi pembantu mapState

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 pembantu mapState untuk membantu kami menjana sifat yang dikira:

import { mapState } from 'vuex';

computed: {
  ...mapState(['count']),
},

Gunakan nama yang berbeza:

computed: {
  ...mapState({
    storeCount: state => state.count,
     // 简写
    storeCount: 'count',  // 等同于 state => state.count
  }),
},

Vuex_Getter

pengiraan kedai harta benda. Nilai pulangan pengambil akan dicache mengikut kebergantungannya, dan hanya akan dikira semula apabila nilai kebergantungannya berubah.

Getter menerima keadaan sebagai parameter pertama dan getter sebagai parameter kedua.

getters: {
  doubleCount (state) {    return state.count * 2;
  }
}

Mengakses melalui sifat

Getters akan didedahkan sebagai objek store.getters:this.$store.getters.doubleCount

Mengakses melalui kaedah

juga boleh membenarkan getters untuk mengembalikan fungsi untuk menghantar parameter kepada pengambil

getters: {
  addCount: state => num => state.count + num;
}

this.$store.addCount(3);

fungsi bantu mapGetters

import { mapsGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters([
      'doubleCount',
      'addCount',
    ])
  }
}

Jika anda ingin memberikan nama lain pada sifat getter, gunakan bentuk objek:

mapGetters({
   // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount` 
  storeDoubleCount: 'doubleCount'
})

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Ketahui lebih lanjut tentang State dan Getters di Vuex. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!