Vuex ialah state perpustakaan pengurusan untuk Vue.js aplikasi, membolehkan anda mengurus dan menyegerakkan data merentas component s yang berbeza dalam aplikasi anda. Vuex melaksanakan seni bina Flux, menjadikannya mudah dan cekap untuk mengurus aplikasi state.
Konsep utama dalam Vuex termasuk
1. State
In mewakili stor data berpusat untuk aplikasi anda state. Vuex Ia menyimpan data aplikasi yang perlu dikongsi antara component s yang berbeza. Berikut ialah contoh mentakrifkan state dalam Vuex:
2. Mutations
Mutations bertanggungjawab untuk mengubah suai state dalam Vuex. Ia adalah fungsi segerak yang mengambil arus state dan muatan sebagai hujah. Berikut ialah contoh mentakrifkan mutasi dalam Vuex:
3. Actions
Actions digunakan untuk mengendalikan operasi tak segerak dan penghantaran mutations untuk mengubah suai state. Ia boleh mengandungi panggilan API, tugas async atau logik kompleks. Berikut ialah contoh mentakrifkan tindakan dalam Vuex:
4. Getters
Getters membolehkan anda mendapatkan semula dan mengira yang diperoleh state daripada Vuex kedai. Mereka berguna untuk mengakses dan memanipulasi data sebelum mengembalikannya ke component s. Berikut ialah contoh untuk menentukan pengambil dalam Vuex:
Untuk memasang Vuex dalam Vue.js projek anda, anda boleh mengikuti langkah ini
Langkah 1: Pasang Vuex melalui npm atau benang:
atau
Langkah 2: Buat store.js
fail dalam direktori akar projek anda. Di sinilah kami akan mengisytiharkan dan menguruskan permohonan itu state.
Langkah 3: Dalam store.js
fail, import Vuex dan buat objek kedai baharu:
Langkah 4: Dalam main.js
fail, import kedai dan pautkannya ke aplikasi Vue anda:
Langkah 5: Sekarang anda telah memasang dan menyediakan Vuex dalam projek anda. Anda boleh mengisytiharkan state s anda, getters, mutations, dan actions dalam store.js
fail, dan menggunakannya dalam Vue component s anda.
Contoh:
Dalam store.js
fail, anda boleh mengisytiharkan mudah state dan mutasi seperti ini:
Dalam Vue component, anda boleh menggunakan state mutasi dan dengan menggunakan fungsi dan : mapState
mapMutations
Dengan langkah ini, anda telah berjaya memasang Vuex dan boleh menggunakannya untuk mengurus aplikasi state anda Vue.js.
Dengan Vuex, anda boleh mengurus aplikasi dengan mudah dan konsisten state. Ia meningkatkan kebolehselenggaraan dan kebolehgunaan semula kod, sambil menyediakan pendekatan berstruktur kepada pengurusan data.