Tutorial asas VUE3: Menggunakan pengurusan keadaan Vue.js

Vue.js ialah rangka kerja JavaScript moden untuk membina antara muka pengguna web. Ia adalah rangka kerja yang sangat popular dan digunakan secara meluas dalam kalangan pembangun. Ciri penting Vue.js ialah pengurusan keadaan, membolehkan anda mengurus aliran dan kawalan data dalam aplikasi anda. Dalam artikel ini, kami akan memperkenalkan asas pengurusan keadaan Vue.js dan menunjukkan cara menggunakan Vue.js untuk mengurus keadaan.

Asas pengurusan negeri Vue.js

Pengurusan negeri Vue.js dilaksanakan berdasarkan perpustakaan Vuex. Vuex ialah perpustakaan pengurusan negeri khusus untuk Vue.js, digunakan untuk mengurus penyebaran dan perkongsian data dalam aplikasi. Vuex merangkumi empat konsep asas: keadaan, mutasi, tindakan dan pengambil.

Negeri:

Negeri mewakili keadaan aplikasi dan mewakili storan semua data dalam Vue.js. Ia adalah bekas storan yang menyimpan data daripada aplikasi kami.

Mutasi:

Mutasi ialah cara untuk menukar keadaan hanya boleh dilaksanakan dalam objek keadaan Ia hanya boleh segerak dan tidak boleh mengendalikan operasi tak segerak.

Tindakan:

Tindakan digunakan untuk menerima permintaan tak segerak daripada komponen Vue dan menggunakan mutasi untuk mengemas kini keadaan aplikasi. Ia boleh mendapatkan data dari bahagian pelayan dan menggunakan mutasi untuk mengemas kini keadaan aplikasi selepas menerima data.

Getters:

Getters membolehkan anda mendapatkan data khusus daripada negeri. Ia serupa dengan harta yang dikira. Ciri ini boleh digunakan untuk mendapatkan data status dengan mudah.

Menggunakan Pengurusan Negeri Vue.js

Dalam bahagian ini, kami akan menunjukkan cara menggunakan pengurusan negeri dalam aplikasi Vue.js.

Pasang Vuex:

Mula-mula, kita perlu memasang perpustakaan Vuex. Pasang menggunakan pengurus pakej npm dalam aplikasi Vue.js anda.

npm install vuex

Keadaan bangunan:

Seterusnya, kita perlu mencipta keadaan dalam aplikasi kita. Keadaan ini ialah objek JavaScript yang mengandungi data kami dan keadaan boleh ubah.

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

count: 0

}
})

Coretan kod di atas mencipta keadaan kiraan, The nilai awal kiraan ialah 0. Objek stor membenarkan kami mengakses pembolehubah keadaan Kami boleh menggunakan keadaan ini di bahagian aplikasi yang berbeza untuk memaparkan dan mengemas kini data.

Status akses:

Sekarang kita telah menyimpan status kiraan dalam objek kedai, langkah seterusnya ialah mendapatkan status. Untuk tujuan ini, kami menggunakan getter untuk mengakses status:

getters: {

getCount: state => state.count

}

Kod di atas mentakrifkan getter: getCount, yang mengembalikan nilai status kiraan .

Kemas kini status:

Seterusnya, kami memerlukan mutasi untuk mengemas kini status kami.

mutasi: {

increment (state) {
    state.count++;
},
decrement (state) {
    state.count--;
}

}

Coretan kod di atas mentakrifkan dua mutasi: kenaikan dan penyusutan. Kedua-dua mutasi ini digunakan di sini untuk menambah dan mengurangkan pembilang.

Menggunakan keadaan:

Sekarang kami telah menentukan keadaan, getter dan mutasi kami, kami boleh menggunakan nilai ini dalam komponen Vue.js kami.

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<h1>{{getCount}}</h1>
<button @click="increment">Increase</button>
<button @click="decrement">Decrease</button>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

186a4287a9c2f19c1f5b7cc59629b8a0

Kod di atas menunjukkan cara menggunakan keadaan, getter dan mutasi kami dalam komponen Vue. Kami menggunakan mutasi kenaikan dan pengurangan, dan getCount getter untuk mendapatkan status. Dengan cara ini, kita boleh menggunakan keadaan dalam komponen untuk memaparkan dan mengemas kini data.

Kesimpulan

Pengurusan keadaan Vue.js ialah alat yang fleksibel yang boleh mengurus aliran data dalam aplikasi dengan mudah. Dengan menggunakan pengurusan keadaan terbina dalam dalam Vue.js atau menggunakan perpustakaan pihak ketiga, kami boleh mengurus keadaan aplikasi kami dengan mudah. Apabila menggunakan pengurusan keadaan dalam aplikasi Vue.js, ingat bahawa keadaan hanya harus mengandungi data aplikasi anda dan bukan sebarang logik. Pengurusan negeri harus dipastikan ringkas dan jelas supaya ia memastikan kebolehselenggaraan dan kebolehskalaan aplikasi yang baik.

Atas ialah kandungan terperinci Tutorial asas VUE3: Menggunakan pengurusan keadaan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!