Vuex - penggunaan berlebihan getter dalam aplikasi. Kesalahan saat menguraikan

Artikel ini akan membahas kesalahan umum yang dilakukan kebanyakan pemula saat mengembangkan aplikasi pada Vue + Vuex. Kami akan berbicara tentang getter dan cara menggunakannya dengan benar. Kita juga akan melihat fungsi pembantu mapState dan mapGetters.

Sebelum Membaca: Disarankan agar Anda memiliki pengetahuan dasar tentang Vue dan Vuex.

Bab 1. Apa itu getter? Contoh penggunaan yang tidak pantas

Getters adalah bagian dari repositori Vuex yang mengembalikan data yang dihitung tentang kondisi repositori saat ini ke komponen kami.

Pertimbangkan sebuah contoh:

const store = new Vuex.Store({ state: { //   books: [ { id: 1, title: '...', finished: true }, { id: 2, title: '...', finished: false } ] }, getters: { //     books: state => state.books } }); 

Ini akan terlihat seperti komponen dengan daftar semua buku:

 export default { computed: { //   books() { return this.$store.getters.books } } } 

Contoh di atas berfungsi, tetapi tidak sepadan. Dengan pendekatan ini, kami membebani aplikasi.

Jika Anda perlu menampilkan data langsung dari penyimpanan ke komponen tanpa modifikasi, getter bukan solusi terbaik. Selanjutnya saya akan menunjukkan bagaimana Anda dapat meningkatkan kode dan menyingkirkan penggunaan getter yang tidak pantas.

Bab 2. Menggunakan mapState untuk mengambil data dari penyimpanan

Dokumentasi berbunyi:

Ketika sebuah komponen perlu menggunakan banyak properti atau getter gudang, menyatakan semua properti yang dihitung ini bisa membosankan. Dalam kasus seperti itu, Anda dapat menggunakan fungsi mapState , yang secara otomatis menghasilkan properti yang dihitung.

Mari kita kembali ke komponen kita dan menggunakan mapState alih-alih pengambil:

 import { mapState } from 'vuex'; export default { computed: { ...mapState([ 'books' ]) } } 

Seorang pengambil dari repositori dapat dihapus, karena kita tidak membutuhkannya lagi:

 const store = new Vuex.Store({ state: { //   books: [ { id: 1, title: '...', finished: true }, { id: 2, title: '...', finished: false } ] } }); 

Jauh lebih nyaman, bukan? Kami menyingkirkan getter yang tidak perlu dan mengurangi jumlah kode.

Bab 3. Mengapa getter, jika ada mapState

Dan mereka masih dibutuhkan. Huruf digunakan dalam kasus di mana Anda perlu menampilkan informasi yang dimodifikasi dari repositori (misalnya, daftar semua buku yang dibaca ).

Mari kita membuat pengambil untuk membuat semua buku dibaca dari repositori:

 const store = new Vuex.Store({ state: { //   books: [ { id: 1, title: '...', finished: true }, { id: 2, title: '...', finished: false } ] }, getters: { //     finishedBooks: state => { return state.books.filter(books => books.finished); } } }); 

Sekarang komponen kita akan terlihat seperti ini:

 import { mapState } from 'vuex'; export default { computed: { //     ...mapState([ 'books' ]), //     finishedBooks() { return this.$store.getters.finishedBooks } } } 

Orang bisa berhenti pada ini, tetapi ada satu hal lagi yang berguna yang perlu diketahui. Jika Anda perlu menggunakan kembali getter yang sama dalam komponen yang berbeda, mungkin tidak nyaman untuk menulis getter setiap kali dalam metode yang dikomputasi. MapGetters datang untuk menyelamatkan .

Mari kita lihat sebuah contoh:

 //     import { mapState, mapGetters } from 'vuex'; export default { computed: { //     ...mapState([ 'books' ]), //   ,   //       ...mapGetters([ 'finishedBooks' ]) } } 

Peningkatannya jelas: menggunakan mapGetters kami mengurangi jumlah kode.

Anda juga dapat menghitung informasi dari repositori berdasarkan pada beberapa data, misalnya, mendapatkan buku dengan id atau namanya. Ini dapat dicapai dengan memberikan argumen kepada pengambil kami.

 const store = new Vuex.Store({ state: { //   books: [ { id: 1, title: '...', finished: true }, { id: 2, title: '...', finished: false } ] }, getters: { //     finishedBooks: state => { return state.books.filter(books => books.finished); }, //    id getBookById: (state) => (id) => { return state.books.find(books => books.id === id) } } }); 

 import { mapState, mapGetters } from 'vuex'; export default { computed: { ...mapState([ 'books' ]), ...mapGetters([ 'finishedBooks', 'getBookById' ]), getBook() { //    id === this.id return this.getBookById(this.id) } } } 

Pengikatan material

• Gunakan getter ketika Anda perlu menampilkan informasi yang dimodifikasi dari repositori (misalnya, daftar semua buku yang dibaca), dalam kasus lain, gunakan fungsi pembantu mapState.
• Getters dapat memberikan argumen tambahan untuk menghitung data berdasarkan mereka.
• Hasil Getter diperbarui ketika salah satu dependensi berubah.

Dokumentasi getter dalam bahasa Rusia

Contoh aplikasi dari artikel di codepen