Mọi điều cần biết về Pinia trong Vue.js

Bạn là lập trình viên Vue đang muốn hợp lí hóa quản lý và đưa phát triển ứng dụng của bản thân lên một tầm cao mới? Hãy nói “xin chào” với Pinia, thư viện quản lý thay đổi game dành cho lập trình Vue.

Pinia là gì?

Pinia là thư viện quản lý dành riêng cho Vue, được thiết kế để mang tới sự đơn giản và hiệu quả vô song cho các dự án Vue. Pinia lấy cảm hứng từ những ứng dụng tốt nhất trong quản lý hiện đại, đồng thời tích hợp vào ứng dụng của bạn cực kỳ gọn nhẹ và đơn giản.

Triết lý đằng sau Pinia là giữ cho mọi thứ ở mức tối thiểu & trang nhã, giúp lập trình viên quản lý ứng dụng dễ dàng. Bằng phương pháp tiếp cận trực quan, Pinia cho phép bạn tập trung vào những vấn đề thường gặp nhất trong khi mang lại trải nghiệm người dùng đặc biệt khi xây dựng ứng dụng Vue.

Các khái niệm cốt lõi của Pinia

• Getters chịu trách nhiệm trích xuất và trả về các giá trị cụ thể từ store. Bằng cách xác định getters, bạn có thể truy cập & xử lý dữ liệu hiệu quả mà không cần phải trực tiếp tinh chỉnh bên dưới.
• Actions đóng vai trò quan trọng trong Pinia, cho phép bạn chỉnh sửa state của store bằng cách thực hiện các hoạt động không đồng bộ hoặc đồng bộ.
• Store là “trái tim” của Pinia, đóng gói state, getter, action và mutation của ứng dụng.
• State chỉ dữ liệu mà store quản lý.

Vuex là gì?

Vuex nổi tiếng là một giải pháp mạnh mẽ trong quản lý state. Vậy Pinia so với Vuex thì lựa chọn nào nổi trội hơn?

Pinia dùng hệ thống phản ứng của Vue để quản lý state, tránh nhu cầu cần bất kỳ phần phụ thuộc bên ngoài. Điều đó có nghĩa hệ sinh thái Pinia tập trung hơn và tránh lỗi mã quá dài tiềm ẩn. Thêm vào đó, việc hỗ trợ TypeScript & nhập chặt chẽ mà nó cung cấp, cho phép bạn bắt lỗi sớm ngay trong quá trình phát triển, dẫn tới các ứng dụng hoàn chỉnh hơn với ít lỗi hơn.

Nếu đang bắt đầu một dự án Vue mới hay cân nhắc chuyển đổi Vuex, Pinia là lựa chọn thay thế hấp dẫn, sắp xếp hợp lý quản lý trạng thái mà không ảnh hưởng tới tính linh hoạt hay hiệu suất hoạt động.

Xây dựng app Vue đơn giản bằng Pinia

Để hiểu rõ hơn về Pinia, hãy thử xây dựng một ứng dụng quản lý danh sách việc cần làm cơ bản. Pinia cung cấp công cụ bạn cần để quản lý trạng thái cho những ứng dụng như thế.

Điều kiện cần có

Đầu tiên, chuẩn bị môi trường cần thiết cho dự án này, bắt đầu bằng Vue CLI.

# Để cài Vue CLI:
npm install -g @vue/cli

# Để tạo thư mục dự án với Vue CLI:
vue create pinia-todo-app

Ở giai đoạn này, bạn có thể thấy trong terminal bạn cần chọn một preset. Tiếp tục bằng cách chọn Vue 3 từ cài đặt mặc định.

Giờ bạn có thể cài Pinia trong thư mục dự án:

cd pinia-todo-app
npm install pinia

Thiết lập file

Bạn chỉ cần chỉnh sửa một số file để hoàn thiện dự án mẫu này. Đầu tiên, tạo file tên store.js trong thư mục src. File này sẽ chứa, thêm và xóa các mục bạn bổ sung vào danh sách cần làm. Nó sẽ thực hiện tất cả việc này bằng các khái niệm Pinia cốt lõi.

// src/store.js
import { defineStore } from "pinia";

export const 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);
    },
  },
});

Thế nhưng, tất nhiên, chỉ riêng file này chưa đủ. Bạn cần liên kết file store.js với App.vue. Để làm việc đó, đổi file src/App.vue như sau:

// src/App.vue
<script>
import { useTodoStore } from './store';

export default {
 data() {
   return {
     todoText: '',
   };
 },
 computed: {
   todos() {
     return useTodoStore().todos;
   },
 },
 methods: {
   addTodo() {
     if (this.todoText.trim() !== '') {
       useTodoStore().addTodo(this.todoText);
       this.todoText = '';
     }
   },
   removeTodo(todoId) {
     useTodoStore().removeTodo(todoId);
   },
 },
};
</script>

Logic ở đây khá đơn giản. Các sự kiện bạn xác định trong store.js sẽ xảy ra khi bạn chỉ định trong file App.vue. Nó giống như file App.vue sẽ đóng vai trò là cơ chế kiểm soát của bạn.

Tất nhiên, theo cách này, ứng dụng không phải là mọi thứ vì bạn không dùng template hay style. Để thêm chúng, bạn có thể chỉnh sửa file App.vue như sau:

// src/App.vue
<template>
 <div>
   <h1>My Pinia Todo List</h1>
   <input v-model="todoText" @keyup.enter="addTodo"
    placeholder="What is your goal?" />

   <ul>
     <li v-for="todo in todos" :key="todo.id">
       {{ todo.text }} <button @click="removeTodo(todo.id)">Done!</button>
     </li>
   </ul>
 </div>
</template>

<script>
import { useTodoStore } from './store';

export default {
 data() {
   return {
     todoText: '',
   };
 },
 computed: {
   todos() {
     return useTodoStore().todos;
   },
 },
 methods: {
   addTodo() {
     if (this.todoText.trim() !== '') {
       useTodoStore().addTodo(this.todoText);
       this.todoText = '';
     }
   },
   removeTodo(todoId) {
     useTodoStore().removeTodo(todoId);
   },
 },
};
</script>

<style>
// Your styles...
</style>

Giờ bạn đã có mọi thứ cần thiết. Dùng các tính năng của khái niệm cốt lõi trong Pinia, bạn có thể kiểm tra trạng thái, thêm & xóa mục mới trong danh sách cần làm như ý muốn. Thế nhưng còn một bước cuối cùng. Bạn nên update file main.js trong thư mục src và bao gồm những thư mục cần thiết cho ứng dụng.

// src/main.js
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";

const pinia = createPinia();

const app = createApp(App);
app.use(pinia);
app.mount("#app");

Mọi thứ cần thiết để kiểm tra ứng dụng đều đã sẵn sàng.

Chạy app Pinia mẫu

Để thấy kết quả của danh sách cần làm đơn giản nhưng mang tính hướng dẫn này, hãy dùng lệnh sau:

npm run serve

Bạn sẽ thấy một giao diện đơn giản, gọn gàng để thêm và loại bỏ các nhiệm vụ:

Nhìn chung, Pinia là một công cụ quý giá khi bạn cần một luồng dữ liệu mượt mà và chạy hiệu quả trong ứng dụng. Bằng cách cung cấp kiến trúc theo dạng mô đun, an toàn khi nhập liệu, phản ứng linh hoạt, Pinia đơn giản hóa quản lý state và tăng hiệu suất hoạt động.