Langkah-langkah pelaksanaan fungsi pengurusan keadaan global dalam dokumentasi Vue

Vue.js ialah rangka kerja JavaScript yang popular dengan keupayaan pengikatan data dan komponenisasi yang berkuasa. Dalam Vue.js, pengurusan keadaan global adalah tugas yang sangat penting, yang membolehkan komponen berbeza berkongsi data dan mengekalkan konsistensi data. Artikel ini akan memperkenalkan langkah-langkah untuk melaksanakan fungsi pengurusan keadaan global dalam dokumen Vue.js.

Dalam Vue.js, pengurusan keadaan global biasanya dilaksanakan menggunakan perpustakaan Vuex. Vuex ialah model pengurusan negeri yang direka khas untuk Vue.js. Ia membolehkan kami mengurus lapisan data dengan mudah dan mengelakkan interaksi data antara komponen.

Langkah pelaksanaan adalah seperti berikut:

1. Pasang Vuex

Pertama, kita perlu menggunakan npm untuk memasang Vuex: npm install vuex --save

2. Buat kedai

Dalam Vue.js, kedai ialah tempat yang digunakan untuk menyimpan keadaan dan data. Kita perlu mencipta kedai baharu dalam main.js dan menyampaikannya kepada contoh Vue.

import Vue daripada 'vue'
import Vuex daripada 'vuex'

Vue.use(Vuex)

kedai const = Vuex.Store baharu({
nyatakan: {

count: 0

},
mutasi: {

increment(state) {
  state.count++
}

}
})

Vue baharu({
el: '#app ',
kedai,
templat: '578d07aa9e36ca6b43806c9706879c6d',
komponen: { Apl }
})

3. Tetapkan status

Kita boleh menggunakan objek keadaan untuk menyimpan data. Dalam contoh di atas, kami menyediakan keadaan yang dipanggil kiraan dan menetapkan nilai awalnya kepada 0. Apabila kita perlu menukar keadaan, kita perlu memanggil mutasi untuk menukar keadaan.

4. Menulis mutasi

Mutasi ialah satu-satunya tempat anda boleh menukar keadaan. Kita mesti mengemas kini keadaan melalui mutasi dan bukannya mengubah secara langsung nilai dalam negeri. Melakukan ini membantu kami menjejaki perubahan keadaan.

Dalam contoh di atas, kami menulis mutasi yang dipanggil kenaikan yang meningkatkan nilai kiraan.

5. Mutasi panggilan

Apabila kita perlu menukar keadaan, kita perlu memanggil mutasi. Kita boleh memanggil mutasi menggunakan ini.$store.commit(mutationName).

Contoh memanggil mutasi dalam komponen:

kaedah: {
increment() {

this.$store.commit('increment')

}
}

dalam Contoh templat untuk memanggil mutasi dalam:

163be9d00220f7d75b178fb6f4dc4c83Increment65281c5ac262bf6d81768915a4a77ac0

6. Dapatkan status

Untuk mendapatkan negeri, kita boleh menggunakan ini.$store.state.stateName.

Contoh mendapatkan status dalam komponen:

dikira: {
count() {

return this.$store.state.count

}
}

dalam Contoh templat mendapatkan status dalam:

e388a4556c0f65e1904146cc1a846bee{{ $store.state.count }}94b3e26ee717c64999d7867364b1b4a3

Ringkasan:

Dengan mencipta kedai, tetapkan Status , menulis mutasi, memanggil mutasi dan mendapatkan status, kami boleh melaksanakan pengurusan status global dalam Vue.js. Vuex bukan sahaja boleh digunakan untuk mengurus data mudah, tetapi juga boleh digunakan untuk menangani senario aplikasi yang kompleks, seperti operasi tak segerak, caching data, modularisasi, dll. Saya harap artikel ini dapat membantu pemula lebih memahami langkah pelaksanaan Vuex.

Atas ialah kandungan terperinci Langkah-langkah pelaksanaan fungsi pengurusan keadaan global dalam dokumentasi Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!