Pinia vs Vuex: Tại sao Vuex đã chết (và cách migrate)

Nếu bạn đang bắt đầu một dự án Vue.js mới vào năm 2026 mà vẫn dùng npm install vuex, bạn đang nợ kỹ thuật (technical debt) ngay từ dòng code đầu tiên.

Vuex từng rất tuyệt vời. Nhưng sự ra đời của Composition API và TypeScript đã khiến kiến trúc của Vuex trở nên lỗi thời và rườm rà. Pinia sinh ra để thay thế nó.

Vuex vs Pinia: Sự khác biệt cốt lõi

1. Goodbye, Mutations!

Trong Vuex, để thay đổi state, bạn phải làm nghi thức phức tạp: Action -> Commit -> Mutation -> State.

// Vuex
mutations: {
  INCREMENT(state) {
    state.count++
  }
},
actions: {
  increment({ commit }) {
    commit('INCREMENT')
  }
}

Trong Pinia, bạn quên Mutations đi. Chỉ cần thay đổi state trực tiếp trong Actions.

// Pinia
actions: {
  increment() {
    this.count++ // Simpler!
  }
}

2. TypeScript Support: Night & Day

• Vuex: Cực kỳ đau khổ để type-safe. Bạn phải tạo các interface phức tạp, dùng constants cho mutation types, và đôi khi this.$store.state vẫn là any.
• Pinia: Type-safe out of the box. Vì kiến trúc phẳng (không nested modules phức tạp), TypeScript hiểu state của bạn ngay lập tức. Autocomplete hoạt động hoàn hảo.

3. Modular by Design

• Vuex: Một Store lớn (Single State Tree) chứa nhiều Modules con. Namespace rất rối rắm (dispatch('moduleA/nested/ACTION')).
• Pinia: Mỗi Store là độc lập (useUserStore, useCartStore). Bạn import store nào dùng store đó. Code splitting tốt hơn nhiều.

Hướng dẫn Migrate (Chiến lược “Chậm mà chắc”)

Đừng đập đi xây lại (Big Bang Rewrite). Hãy migrate từng phần.

1. Cài đặt Pinia song song: Trong main.js, use cả store (Vuex) và pinia. Chúng không đánh nhau.

2. Migrate Utilities trước: Bắt đầu với các store nhỏ, độc lập (vd: NotificationStore, ThemeStore). Chuyển từ Vuex Module sang Pinia Store.

3. Refactor Components: Trong component, thay vì mapGetters hay this.$store, hãy const userStore = useUserStore().

4. Xử lý Shared State: Nếu Vuex action cần gọi Pinia? Import Pinia store vào trong Vuex action và dùng bình thường.

Kết luận

Vuex đã hoàn thành sứ mệnh lịch sử của nó. Pinia (trước đây gọi là “Vuex 5”) chính là tương lai. Nó nhẹ hơn (1KB), đơn giản hơn, và mạnh mẽ hơn.

Đừng luyến tiếc quá khứ. npm uninstall vuex đi.