Vuex menyediakan alat yang mudah untuk bekerja dengan data, tetapi beberapa pengembang tidak selalu menggunakannya untuk tujuan yang dimaksudkan, atau membuat konstruksi yang berlebihan di mana dimungkinkan untuk menulis dengan lebih jelas dan ringkas, ini juga terjadi ketika pengembang hanya berkenalan dengan alat ini. Artikel ini akan memberikan beberapa pedoman untuk mengatur getter yang dapat Anda terapkan pada pekerjaan Anda.
Getters adalah bagian dari repositori Vuex, properti yang dihitung, lebih khusus. Mereka memungkinkan Anda untuk menerima, misalnya, data yang difilter oleh beberapa parameter. Tetapi beberapa pengembang mengambil nama alat ini secara harfiah dan mulai menggunakannya sebagai pengganti untuk mendapatkan data langsung dari negara . Dari sini, ikuti kesalahan pertama dalam menggunakan getter.
Menggunakan getter untuk dengan mudah mengambil data dari penyimpanan
Mari kita lihat contoh kode sederhana:
state: { films: [ { id: 1, name: ' ' }, { id: 2, name: ' ' }, { id: 3, name: ' 60' }, ], }, getters: { films: state => state.films, },
Penggunaan getter ini cukup umum dan ini buruk. Untuk mengakses status di komponen Anda, cukup buat nilai yang dihitung dalam perhitungan, misalnya:
computed: { films() { return this.$store.state.films; }, },
Atau opsi yang bahkan lebih nyaman menggunakan mapState:
computed: { ...mapState(['films']), },
Ambil metode seperti itu untuk mendapatkan data, maka Anda tidak akan membebani kode Anda dengan kode berlebihan.
IMHO: banyak campuran menggunakan mapState dan menciptakan nilai yang dihitung yang mengembalikan status. Untuk membuat kode yang seragam, gunakan mapState dan alat lainnya bahkan untuk satu nilai, karena kode Anda akan menjadi lebih seragam dan Anda dapat membuat perubahan lebih cepat dan lebih mudah, misalnya, jika Anda harus menampilkan satu nilai lagi.
Buat pengambil untuk filter sekali pakai
Misalkan Anda perlu mendapatkan film James Bond, untuk beberapa kasus tertentu, Anda mungkin ingin melakukan ini:
getters: { bondFilm: state => state.films .find(f => f.name === ' ') || {}, },
Tidak perlu melakukan ini, lebih baik beralih ke mapState lagi dan lakukan sebagai berikut:
computed: { ...mapState({ bondFilm: state => state.films .find(f => f.name === ' ') || {}, }), },
Bahkan, Anda cukup mentransfer filter spesifik ke komponen Anda di mana diperlukan, contohnya sangat abstrak, tetapi saya sering bertemu dalam praktiknya.
Buat getter dengan parameter
Metode bekerja dengan getter ini sangat mudah dan sering ditemukan, tetapi kita tidak boleh lupa bahwa getter adalah properti yang dihitung dan di-cache. Ini tidak berarti bahwa Anda tidak dapat menggunakannya sama sekali, tetapi lebih baik untuk sekali lagi memikirkan apakah itu bisa sebaliknya. Lihatlah sebuah contoh:
getters: { filmById: state => id => state.films .find(film => film.id === id) || {}, },
Faktanya adalah bahwa dengan panggilan seperti itu, Anda agak mengatakan bahwa Anda perlu setiap kali menghitung ulang hasil rajin, dan kemudian memberikannya kepada Anda. Jika ada kebutuhan untuk merakit struktur ini, maka Anda dapat melakukan sesuatu seperti ini:
getters: { filmsById: (state) => { const result = {}; state.films.forEach((film) => { result[film.id] = film; }); return result; }, },
Dalam hal ini, penghitungan ulang hanya akan terjadi jika terjadi perubahan data, dan Anda dapat merujuk ke id sebagai kunci objek.
Untuk meringkas
- Jangan menggunakan getter untuk pengambilan data sederhana, tidak perlu menyulitkan kode Anda dengan pembungkus untuk operasi sederhana
- Jangan membuat getter untuk filter spesifik yang hanya akan diperlukan sekali, ide utama getter adalah untuk memperoleh status turunan, tetapi Anda tidak perlu mentransfer logika komponen ke logika penyimpanan
- Getter yang diparameterisasi kehilangan properti utama mereka - cacheability, pikirkan beberapa kali sebelum menggunakannya dengan cara ini
- Manfaatkan sepenuhnya mapState, ingatlah bahwa sebagian besar tugas spesifik untuk suatu komponen dapat dilakukan dengan menggunakannya
- Gunakan mapGetters, ini telah dikatakan secara tidak langsung, tetapi keseragaman lebih baik daripada tidak memilikinya
Artikel ini ditulis untuk pengembang pemula dan bingung, jika Anda belum membuka dokumentasi untuk Vue dan Vuex , dan hal pertama yang Anda lakukan untuk melihat informasi tentang masalah pada hub, kemudian ikuti tautan di atas dan mulai membaca dari mereka, gunakan tips dari berbagai sumber setelah itu.