Pengantar Pinia di Vue.js

Takeaway kunci

• Pinia adalah pustaka manajemen status untuk Vue yang menghadirkan kesederhanaan dan efisiensi untuk pengembangan aplikasi, dengan fokus pada minimalisme dan pendekatan intuitif.
• Konsep inti Pinia meliputi getter, action, store, dan state, yang memungkinkan pengembang mengelola dan berbagi data secara efektif dalam komponen Vue mereka.
• Dibandingkan dengan Vuex, Pinia menawarkan pendekatan yang lebih modern dan minimalis, menggunakan sistem reaktivitas Vue dan menyediakan pengetikan yang ketat dan dukungan TypeScript untuk aplikasi yang lebih kuat dengan lebih sedikit bug. Ini adalah opsi yang layak untuk proyek baru atau bermigrasi dari Vuex.

Apakah Anda seorang pengembang Vue yang ingin merampingkan manajemen status Anda dan meningkatkan pengembangan aplikasi Anda? Sampaikan salam untuk Pinia, pustaka manajemen status pengubah permainan untuk para penggemar Vue.

Lihatlah konsep inti Pinia selangkah demi selangkah dan lihat bagaimana Anda dapat membuka potensinya. Cari tahu bagaimana pustaka ini dibandingkan dengan Vuex dan pelajari cara membuat aplikasi Pinia sederhana.

Apa itu Pinia?

Pinia adalah perpustakaan manajemen negara khusus dibuat untuk Vue, dirancang untuk menghadirkan kesederhanaan dan efisiensi yang tak tertandingi ke proyek Vue Anda. Dikembangkan untuk memberikan pengalaman yang mulus bagi pengembang Vue, Pinia mengambil inspirasi dari praktik terbaik manajemen keadaan modern sekaligus sangat ringan dan mudah diintegrasikan ke dalam aplikasi Anda.

Filosofi di balik Pinia adalah menjaga hal-hal tetap minimal dan elegan, memudahkan pengembang untuk mengelola status aplikasi. Mengambil pendekatan yang sederhana dan intuitif, Pinia memungkinkan Anda untuk fokus pada hal yang paling penting dan menghadirkan pengalaman pengguna yang luar biasa saat membangun aplikasi Vue Anda.

Konsep Inti Pinia

Untuk mendapatkan hasil maksimal dari Pinia, penting untuk memahami konsep dasarnya.

Getter

Getter di Pinia bertanggung jawab untuk mengekstraksi dan mengembalikan nilai tertentu dari status penyimpanan. Dengan mendefinisikan getter, Anda dapat mengakses dan memproses data secara efisien tanpa memanipulasi status dasar secara langsung. Anggap saja sebagai properti yang dihitung yang disesuaikan dengan keadaan toko Anda.

Tindakan

Tindakan memainkan peran penting dalam Pinia, memungkinkan Anda mengubah status toko dengan melakukan operasi asinkron atau sinkron. Mereka berfungsi sebagai jembatan antara komponen aplikasi Anda dan penyimpanan, memastikan mutasi status mengikuti pola yang dapat diprediksi dan mematuhi praktik terbaik.

Toko

Toko mewakili jantung Pinia, merangkum status aplikasi, getter, tindakan, dan mutasi (jika ada). Ini bertindak sebagai satu sumber kebenaran, menjaga status aplikasi Anda tetap terpusat dan mudah diakses di seluruh komponen Anda.

Negara

Status mengacu pada data yang dikelola toko Anda. Ini adalah data reaktif yang diandalkan komponen Anda untuk menampilkan informasi terbaru kepada pengguna. Dengan menggunakan objek status di dalam toko, Anda dapat mengelola dan berbagi data dengan lancar di seluruh komponen.

Bagaimana dengan Vuex?

Anda mungkin bertanya-tanya bagaimana perbandingan Pinia dengan Vuex, yang telah menjadi pustaka manajemen negara untuk pengembang Vue selama beberapa waktu. Sementara Vuex tidak diragukan lagi merupakan solusi yang tangguh dan bertenaga, Pinia membedakan dirinya dengan pendekatan yang lebih modern dan minimalis.

Pinia menggunakan sistem reaktivitas Vue untuk mengelola status, menghindari kebutuhan akan ketergantungan eksternal apa pun. Artinya, ekosistem Pinia lebih terarah dan terhindar dari potensi gembung. Selain itu, pengetikan yang ketat dan dukungan TypeScript yang diberikannya memungkinkan Anda menemukan kesalahan di awal proses pengembangan, yang menghasilkan aplikasi yang lebih kuat dengan bug yang lebih sedikit.

Jika Anda memulai proyek Vue baru atau mempertimbangkan untuk bermigrasi dari Vuex, Pinia menawarkan alternatif menarik yang merampingkan manajemen status tanpa mengorbankan fleksibilitas atau kinerja.

Aplikasi Vue Sederhana Menggunakan Pinia

Untuk mempelajari semua tentang Pinia, coba buat contoh aplikasi; A manajer daftar tugas dasar adalah kandidat yang baik. Aplikasi daftar tugas memiliki struktur sederhana tempat pengguna dapat menambahkan tugas yang harus dilakukan, menandai dan menunjukkan penyelesaiannya, serta menghapus dan mengedit pekerjaan sesuai kebutuhan. Pinia menyediakan alat yang Anda butuhkan untuk mengelola status untuk aplikasi semacam itu.

Prasyarat

Pertama-tama, Anda perlu menyiapkan lingkungan yang diperlukan untuk proyek ini, dimulai dengan Vue CLI.

# To install Vue CLI:
npm install -g @vue/cli
# To create the project folder with Vue CLI:
vue create pinia-todo-app

Pada tahap ini, Anda dapat melihat di terminal bahwa Anda perlu memilih preset. Anda dapat melanjutkan dengan memilih Lihat 3 dari pengaturan default; contoh ini akan terus menggunakan Vue 3.

Sekarang Anda dapat menginstal Pinia di folder proyek Anda:

cd pinia-todo-app
npm install pinia

Siapkan File Anda

Anda hanya perlu mengedit beberapa file untuk menyelesaikan proyek sampel ini.

Pertama, buat file bernama store.js di bawah src map. File ini akan menampung, menambah, dan menghapus item yang akan Anda tambahkan ke daftar tugas. Itu akan melakukan semua ini menggunakan konsep inti Pinia.

// src/store.js
import { defineStore } from"pinia";
exportconst useTodoStore = defineStore("todo", {
 state: () => ({
 todos: [],
 }),
 actions: {
 addTodo(todoText) {
this.todos.push({ id: Date.now(), text: todoText });
 },
 removeTodo(todoId) {
this.todos = this.todos.filter((todo) => todo.id !== todoId);
 },
 },
});

Namun, tentunya file ini saja tidak cukup. Anda perlu menautkan store.js mengajukan dengan Aplikasi.vue. Untuk melakukannya, ubah src/App.vue berkas sebagai berikut:

// src/App.vue