Vuex 与 Pinia 深度对比

Vuex 与 Pinia 深度对比

一、核心概念对比

特性	Vuex	Pinia
设计理念	Flux架构实现	组合式API风格
Vue版本支持	Vue 2/3	Vue 3专享
TypeScript支持	需要额外配置	原生完美支持
学习曲线	较陡峭（概念多）	更平缓（概念简化）
包体积	较大（3.4kb gzipped）	更小（1.5kb gzipped）

二、基本用法差异

1. Vuex 基本结构

// store.js
import {
    createStore } from 'vuex';

export default createStore({
   
  state: {
   
    count: 0
  },
  mutations: {
   
    increment(state) {
   
      state.count++
    }
  },
  actions: {
   
    asyncIncrement({
     commit }) {
   
      setTimeout(() => commit('increment'), 1000)
    }
  },
  getters: {
   
    doubleCount: state => state.count * 2
  }
});

// 组件中使用
import {
    useStore } from 'vuex';
export default {
   
  setup() {
   
    const store = useStore();
    return {
   
      count: computed(()