Vuex vs Pinia：差異與概念釐清

2025年7月2日

Vuex 是 Vue 2 的官方狀態管理方案，Pinia 則是 Vue 團隊在 Vue 3 中推薦的新方案，具有更輕量、TypeScript 支援佳等優勢。

核心差異比較

項目	Vuex	Pinia
模組化	需手動拆分 modules	天然支持多 Store
語法	mutation/action 分離，語法冗長	直接寫函式，語法精簡
DevTools 支援	支援	支援，且更清楚
TypeScript 支援	複雜，需自定型別	天然支援，型別推斷好
Vue 版本	Vue 2.x / Vue 3	Vue 3 官方推薦

常見觀念釐清

Vuex 是 Flux 架構： 需要透過 commit、dispatch 操作，較為繁瑣
Pinia 是 Composition API 設計： 與 setup 語法一致，邏輯更集中，學習成本低
Pinia 中沒有 mutation： state 可直接修改（支援 proxy 反應性）
多 Store 管理更彈性： 可根據功能定義多個獨立 store，避免大型 Vuex 文件拆分混亂

簡易 Pinia 實作範例


// stores/counter.ts
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})


<script setup lang="ts">
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()
</script>

<template>
  <button @click="counter.increment">加一：{{ counter.count }}</button>
</template>

何時該選用 Pinia？

正在使用 Vue 3，建議選用 Pinia（官方推薦）
需要較佳的 TypeScript 開發體驗
希望結合 Composition API 管理邏輯
需要多 store 模組化管理更簡潔

想知道用 Vue 做出一個 SEO 網站嗎？參考： SEO 與 Nuxt