Vue JS State Management

 

State Management

State management pada Vue.js adalah cara untuk mengatur dan mengelola data dalam aplikasi Vue.js. Konsep ini sangat penting karena dalam aplikasi Vue.js, terdapat banyak komponen yang dapat memanipulasi data, dan state management memastikan bahwa data yang ditampilkan oleh komponen tersebut konsisten dan dapat diakses oleh semua komponen yang membutuhkan.

1. State: State adalah objek yang menyimpan data global dalam aplikasi Vue. Ini mencakup data yang akan digunakan oleh komponen-komponen dalam aplikasi. State dapat berupa objek, array, boolean, atau tipe data lainnya. State umumnya ditempatkan di dalam store.
2. Store: Store adalah tempat sentral di mana state disimpan. Store menyediakan metode dan fungsi untuk mengubah dan mengakses state. Dalam Vue.js versi 3, store dapat dibuat menggunakan library state management seperti Vuex atau Pinia. Store dapat diimpor dan digunakan di seluruh aplikasi untuk mengelola state secara konsisten.
3. Mutations: Mutations adalah fungsi yang digunakan untuk mengubah state dalam store. Hanya mutasi yang dapat mengubah state secara langsung. Mutations harus bersifat sinkron dan memungkinkan Anda mengubah state dengan mengoperasikan nilainya.
4. Actions: Actions adalah fungsi yang digunakan untuk melakukan tindakan tertentu, seperti memuat data dari server atau mengubah state secara tidak langsung melalui pemanggilan mutasi. Actions dapat menjalankan operasi asinkron dan kemudian memanggil mutasi untuk mengubah state.
5. Getters: Getters adalah metode yang digunakan untuk mendapatkan data dari state di dalam store. Mereka mirip dengan computed properties dalam komponen Vue. Getters berguna ketika kalian perlu melakukan pemrosesan atau pengolahan tambahan pada data sebelum menggunakannya.

Dengan menggunakan state management, kalian dapat mengelola state aplikasi secara terpusat dan membuat komunikasi antara komponen menjadi lebih mudah. Ini membantu dalam menghindari masalah seperti prop drilling (meneruskan properti melalui beberapa komponen) dan menjaga aplikasi tetap terorganisir serta mudah dipelihara.

Pilihan state management yang umum digunakan dalam Vue.js versi 3 adalah Vuex dan Pinia. Keduanya menyediakan struktur yang jelas dan alat untuk mengelola state aplikasi dengan baik. Pilihan antara keduanya tergantung pada preferensi dan kompleksitas proyek Anda. Namun pada modul ini akan menggunakan Pinia dikarenakan Vuex sendiri sudah ditangguhkan pengembangannya.

 

Pinia State Management

Pinia adalah library state management baru yang ditujukan sebagai alternatif untuk Vuex dalam mengelola state pada aplikasi Vue.js.

Salah satu fitur utama Pinia adalah dukungan penuh untuk Vue 3 dan Composition API. Pinia juga didesain dengan prinsip-prinsip yang sederhana dan mudah dipelajari, sehingga dapat membantu pengembang membangun aplikasi Vue.js dengan lebih cepat dan efisien.

Beberapa fitur dan kelebihan Pinia adalah:

1. Terintegrasi dengan Vue 3 dan Composition API: Pinia menggunakan Vue 3 dan Composition API sebagai basisnya, sehingga mudah dipelajari dan memiliki performa yang lebih baik.
2. Mudah digunakan: Pinia didesain dengan prinsip-prinsip yang sederhana dan mudah dipelajari, sehingga memudahkan pengembang untuk memahaminya.
3. Terdistribusi: Pinia mendukung distribusi state, yang memungkinkan pengembang untuk memisahkan state ke dalam beberapa modul yang berbeda.
4. Type-safe: Pinia didesain dengan menggunakan TypeScript dan memiliki dukungan penuh untuk type-checking, sehingga dapat membantu pengembang menghindari kesalahan type.
5. Ringan: Pinia memiliki ukuran yang kecil sehingga dapat membantu mempercepat waktu load aplikasi.
6. Mudah digabungkan dengan Vue.js: Pinia dapat dengan mudah digunakan bersama dengan Vue.js dan dapat digabungkan dengan Vuex.

Dalam keseluruhan, Pinia adalah library state management yang menjanjikan untuk aplikasi Vue.js yang baru maupun yang sudah ada. Dengan fitur-fitur yang dimilikinya, Pinia dapat membantu pengembang dalam membangun aplikasi Vue.js yang lebih cepat, mudah dipelajari, dan memiliki performa yang lebih baik.

 

 

Perbedaan Pinia Dengan Vuex

Pinia dan Vuex adalah dua library state management pada Vue.js yang memiliki perbedaan dalam beberapa hal. Berikut ini adalah beberapa perbedaan antara Pinia dan Vuex:

1. Terintegrasi dengan Vue 3: Pinia didesain dengan mengikuti arsitektur Vue 3, sedangkan Vuex masih mengikuti arsitektur Vue 2. Hal ini membuat Pinia memiliki performa yang lebih baik dan lebih mudah digunakan pada aplikasi Vue.js yang menggunakan Vue 3.
2. Menggunakan Composition API: Pinia didesain untuk digunakan bersama dengan Composition API pada Vue 3, sedangkan Vuex masih mengikuti arsitektur lama dengan menggunakan options API. Hal ini membuat kode dengan Pinia menjadi lebih ringkas dan mudah dibaca.
3. Type-safe: Pinia didesain dengan menggunakan TypeScript dan memiliki dukungan penuh untuk type-checking, sehingga dapat membantu pengembang menghindari kesalahan type. Sedangkan Vuex tidak memiliki fitur ini secara bawaan.
4. Terdistribusi: Pinia mendukung distribusi state, yang memungkinkan pengembang untuk memisahkan state ke dalam beberapa modul yang berbeda. Sedangkan di Vuex, state secara default diatur secara global dan hanya dapat diakses secara keseluruhan.
5. Ringan: Pinia memiliki ukuran yang lebih kecil daripada Vuex, sehingga dapat membantu mempercepat waktu load aplikasi.

Dalam keseluruhan, Pinia dan Vuex adalah dua library state management pada Vue.js yang dapat dipilih sesuai kebutuhan pengembang. Pinia memiliki fitur-fitur yang lebih modern dan lebih mudah digunakan pada Vue 3 dengan Composition API, sedangkan Vuex memiliki fitur-fitur yang sudah teruji pada Vue 2.

 

Instalasi Pinia

Berikut ini adalah cara instalasi Pinia pada aplikasi Vue.js:

1. Pastikan aplikasi Vue.js yang Anda buat sudah terinstal Vue 3 dan Vue CLI. Jika belum terinstal, Anda dapat menginstalnya dengan perintah berikut pada terminal:

2. Setelah itu, instal Pinia pada aplikasi Vue.js dengan perintah berikut pada terminal:

3. Setelah instalasi selesai, buka file `main.js` pada folder `src`dan tambahkan kode berikut untuk mengaktifkan Pinia pada aplikasi Vue.js:

Pada kode di atas, kita membuat instance dari Pinia dengan `createPinia()` dan mendaftarkannya pada aplikasi Vue.js dengan menggunakan method `use()`. Kemudian, kita memasukkan instance Pinia pada parameter `data()` pada komponen Vue.js yang membutuhkan state management.

4. Sekarang, Pinia sudah berhasil diinstal pada aplikasi Vue.js Anda dan siap digunakan.

Demikianlah cara instalasi Pinia pada aplikasi Vue.js. Setelah Pinia terinstal, Anda dapat menggunakan fitur-fitur state management yang disediakan Pinia pada komponen Vue.js.

 

Contoh State Management Pinia

Berikut merupakan langkah-langkah untuk membuat program state management menggunakan Pinia pada Vue.js dengan implementasi state, actions, dan getters

1. Instalasi

Pastikan pada proyek kalian telah terinstall Vue.js versi 3, lalu pastikan juga Pinia telah terinstall dengan baik dan benar

2. Buat Store

Buatlah file baru dengan nama `store.js` di direktori proyek anda, lalu impor Pinia dan buat instance store. Setelah itu tambahkan deklarasikan state, actions, dan getter pada file tersebut seperti contoh di bawah

3. Menggunakan Store dalam Komponen

Impor store yang telah dibuat ke komponen Vue yang ingin menggunakan state, actions, atau getters seperti contoh di bawah

4. Registrasi Store dalam Aplikasi

Langkah selanjutnya yaitu impor store dan daftarkan dalam aplikasi Vue pada file `main.js` seperti contoh di bawah

Dengan langkah-langkah di atas, kalian telah membuat program state management menggunakan Pinia pada Vue.js versi 3. Kalian dapat menambahkan lebih banyak state, actions, dan getters sesuai kebutuhan kalian. Pastikan untuk mengikuti struktur yang diberikan oleh Pinia untuk mengelola state dengan baik dalam aplikasi Vue.js kalian.

 

Source:

https://vuejs.org/

https://pinia.vuejs.org/

 

Soal

1. Apa itu getters?
2. Apa langkah selanjutnya ketika kita sudah berhasil menginstall pinia?
3. Bagaimana cara mengelola state pada vue js?
4. Sebutkan perbedaan antara vuex dan pinia!
5. Mengapa kita menggunakan pinia jika vuex adalah library state resmi vue?

 

Quiz

1. Apa yang dimaksud dengan state management dalam konteks Vue.js?
1. Cara mengatur tampilan komponen
2. Cara mengelola data dan mempertahankan keadaan aplikasi
3. Cara membuat komponen reusable
4. Cara menghubungkan komponen dengan API backend
2. Apa kegunaan utama dari state management dalam aplikasi Vue.js?
1. Mempercepat proses rendering komponen
2. Memudahkan pemeliharaan dan pengelolaan data yang kompleks
3. Memungkinkan komunikasi antara komponen secara efisien
4. Meningkatkan performa aplikasi secara keseluruhan
3. Apa yang membedakan Pinia dengan Vuex dalam konteks state management di Vue.js?
1. Pinia lebih cocok untuk aplikasi kecil, sedangkan Vuex lebih cocok untuk aplikasi besar
2. Pinia menggunakan pendekatan reactive state, sedangkan Vuex menggunakan pendekatan mutasi state
3. Pinia menyediakan API yang lebih sederhana dan intuitif dibandingkan Vuex
4. Pinia hanya mendukung Vue.js versi 3, sedangkan Vuex mendukung versi 2 dan 3
4. Apa yang perlu dilakukan untuk menginstal Pinia pada proyek Vue.js?
1. Menjalankan perintah npm install pinia pada terminal
2. Menambahkan <script src="pinia.js"></script> pada file HTML
3. Menjalankan perintah vue add pinia pada terminal
4. Menambahkan konfigurasi pinia: true pada file vue.config.js
5. Apa yang dimaksud dengan reactive state dalam konteks Pinia?
1. State yang dapat diubah langsung oleh komponen tanpa menggunakan aksi (actions)
2. State yang berubah secara otomatis ketika ada perubahan pada data terkait
3. State yang hanya dapat diakses melalui aksi (actions) yang ditentukan
4. State yang bersifat statis dan tidak dapat berubah
6. Bagaimana cara mengakses state dalam Pinia pada sebuah komponen Vue.js?
1. Dengan menggunakan getter dalam metode setup()
2. Dengan mengimpor state dari file store dan mengaksesnya langsung
3. Dengan menggunakan this.$store.state pada komponen
4. Dengan menggunakan helper useStore() pada komponen
7. Apa yang dimaksud dengan aksi (actions) dalam Pinia?
1. Metode yang digunakan untuk memperbarui state secara langsung
2. Metode yang digunakan untuk memanggil API atau melakukan operasi asinkron
3. Metode yang digunakan untuk mengatur tampilan komponen
4. Metode yang digunakan untuk mengatur alur navigasi dalam aplikasi
8. Bagaimana cara menggunakan aksi (actions) dalam Pinia pada sebuah komponen Vue.js?
1. Dengan menggunakan store.dispatch() pada komponen
2. Dengan menambahkan aksi ke dalam properti methods pada komponen
3. Dengan menggunakan getter dalam metode setup()
4. Dengan mengimpor aksi dari file store dan mengaksesnya langsung
9. Apa yang dimaksud dengan getter dalam Pinia?
1. Metode yang digunakan untuk mengakses data state
2. Metode yang digunakan untuk mengubah data state
3. Metode yang digunakan untuk mengakses aksi (actions)
4. Metode yang digunakan untuk mengatur tampilan komponen
10. Apa yang dimaksud dengan mutation dalam Pinia?
1. Proses perubahan state secara langsung tanpa melalui aksi (actions)
2. Metode yang digunakan untuk mengubah data state
3. Metode yang digunakan untuk mengakses aksi (actions)
4. Metode yang digunakan untuk mengatur alur navigasi dalam aplikasi