Quản lý trạng thái (state management) bằng Pinia trong Vue 3 là một bước tiến quan trọng để quản lý và chia sẻ dữ liệu giữa các components trong ứng dụng. Pinia được xây dựng với mục tiêu thay thế Vuex (từ Vue 2) và cung cấp một cách thức quản lý state hiệu quả, dễ sử dụng hơn trong Vue 3.

1. Pinia là gì?

Pinia là một thư viện quản lý state chính thức dành cho Vue 3, tương tự như Vuex, nhưng với cú pháp đơn giản hơn và nhiều cải tiến hiệu suất. Pinia hỗ trợ Vue Devtools, giúp bạn dễ dàng theo dõi và debug các thay đổi trong state của ứng dụng.

2. Khái niệm cơ bản trong Pinia

Pinia được cấu trúc xung quanh khái niệm store (kho lưu trữ). Một store chứa các state, getters, actions, và có thể được chia sẻ giữa các components.

• State: Chứa dữ liệu mà bạn muốn quản lý và chia sẻ giữa các component.
• Getters: Là các hàm giúp truy xuất và tính toán lại giá trị của state (tương tự computed properties).
• Actions: Là các hàm để thay đổi state hoặc thực hiện các logic phức tạp, chẳng hạn như gọi API hoặc thao tác không đồng bộ.

3. Cài đặt Pinia

Trước tiên, bạn cần cài đặt Pinia vào dự án Vue 3 của mình:

npm install pinia

Tiếp theo, bạn sẽ cần khai báo và sử dụng Pinia trong ứng dụng:

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);

// Tạo một instance của Pinia và thêm vào ứng dụng
const pinia = createPinia();
app.use(pinia);

app.mount('#app');

4. Tạo một store trong Pinia

Bạn có thể tạo một store bằng cách sử dụng defineStore. Đây là ví dụ cơ bản về một store quản lý state cho một giỏ hàng trong e-commerce:

import { defineStore } from 'pinia';

export const useCartStore = defineStore('cart', {
  // Dữ liệu (state) mà store quản lý
  state: () => ({
    items: [],
    total: 0,
  }),

  // Getters để truy xuất và tính toán lại state
  getters: {
    itemCount: (state) => state.items.length,
  },

  // Actions để thay đổi state
  actions: {
    addItem(item) {
      this.items.push(item);
      this.total += item.price;
    },
    removeItem(index) {
      this.total -= this.items[index].price;
      this.items.splice(index, 1);
    },
  },
});

5. Sử dụng store trong component

Để sử dụng store trong component, bạn có thể sử dụng hook useStore và gọi các state, getters, actions trực tiếp:

<template>
  <div>
    <h2>Cart Items: {{ cart.itemCount }}</h2>
    <ul>
      <li v-for="(item, index) in cart.items" :key="index">
        {{ item.name }} - {{ item.price }}
        <button @click="removeItem(index)">Remove</button>
      </li>
    </ul>
    <button @click="addNewItem">Add New Item</button>
  </div>
</template>

<script>
import { useCartStore } from '@/stores/cart';

export default {
  setup() {
    const cart = useCartStore();

    const addNewItem = () => {
      cart.addItem({ name: 'New Item', price: 100 });
    };

    const removeItem = (index) => {
      cart.removeItem(index);
    };

    return { cart, addNewItem, removeItem };
  },
};
</script>

6. Điểm khác biệt giữa Pinia và Vuex

• Cú pháp đơn giản hơn: Pinia loại bỏ sự phức tạp khi khai báo mutations (Vuex có khái niệm mutations riêng để cập nhật state, nhưng trong Pinia, bạn chỉ cần sử dụng actions).
• Chia store thành nhiều modules dễ dàng: Pinia khuyến khích tổ chức store thành nhiều module nhỏ, dễ quản lý.
• Hỗ trợ TypeScript tốt hơn: Pinia cung cấp trải nghiệm TypeScript tốt hơn với cú pháp rõ ràng và ít boilerplate.
• Server-Side Rendering (SSR): Pinia hoạt động tốt với các ứng dụng SSR mà không cần cấu hình phức tạp.

7. Kết luận

Pinia mang lại sự đơn giản và hiệu quả trong việc quản lý state cho Vue 3, phù hợp với các dự án từ nhỏ đến lớn. Việc sử dụng Pinia giúp quản lý dữ liệu trong ứng dụng dễ dàng hơn, cải thiện trải nghiệm phát triển và hiệu suất.

Nếu bạn đã quen thuộc với Vuex từ Vue 2, việc chuyển sang Pinia sẽ là một trải nghiệm dễ dàng và giúp bạn tối ưu hóa cách quản lý state trong Vue 3.