Vuex adalah state pustaka manajemen untuk Vue.js aplikasi, memungkinkan Anda mengelola dan menyinkronkan data di berbagai component perangkat dalam aplikasi Anda. Vuex mengimplementasikan arsitektur Flux, membuatnya mudah dan efisien untuk mengelola aplikasi state.
Konsep kunci Vuex termasuk
1. State
in mewakili penyimpanan data terpusat untuk aplikasi Anda state. Vuex Itu menyimpan data aplikasi yang perlu dibagikan di antara component pengguna yang berbeda. Berikut adalah contoh mendefinisikan a state di Vuex:
2. Mutations
Mutations bertanggung jawab untuk memodifikasi state di Vuex. Mereka adalah fungsi sinkron yang mengambil arus state dan muatan sebagai argumen. Berikut adalah contoh mendefinisikan mutasi di Vuex:
3. Actions
Actions digunakan untuk menangani operasi asinkron dan pengiriman mutations untuk memodifikasi file state. Mereka dapat berisi panggilan API, tugas asinkron, atau logika kompleks. Berikut adalah contoh mendefinisikan tindakan di Vuex:
4. Getters
Getters memungkinkan Anda untuk mengambil dan menghitung yang berasal state dari Vuex toko. Mereka berguna untuk mengakses dan memanipulasi data sebelum mengembalikannya ke s component. Berikut adalah contoh mendefinisikan pengambil di Vuex:
Untuk menginstal Vuex di Vue.js proyek Anda, Anda dapat mengikuti langkah-langkah ini
Langkah 1: Instal Vuex melalui npm atau benang:
atau
Langkah 2: Buat store.js
file di direktori root proyek Anda. Di sinilah kami akan mendeklarasikan dan mengelola aplikasi state.
Langkah 3: Di store.js
file, impor Vuex dan buat objek penyimpanan baru:
Langkah 4: Dalam main.js
file, impor toko dan tautkan ke aplikasi Vue Anda:
Langkah 5: Sekarang Anda telah menginstal dan menyiapkan Vuex proyek Anda. Anda dapat mendeklarasikan state s, getters, mutations, dan actions dalam store.js
file, dan menggunakannya dalam Vue component s.
Contoh:
Di store.js
file tersebut, Anda dapat mendeklarasikan mutasi sederhana state dan seperti ini:
Dalam Vue component, Anda dapat menggunakan state and mutasi dengan menggunakan fungsi and : mapState
mapMutations
Dengan langkah-langkah ini, Anda telah berhasil menginstal Vuex dan dapat menggunakannya untuk mengelola aplikasi state Anda Vue.js.
Dengan Vuex, Anda dapat mengelola aplikasi dengan mudah dan konsisten state. Ini meningkatkan pemeliharaan dan penggunaan kembali kode, sambil memberikan pendekatan terstruktur untuk manajemen data.