跳至主要內容

Pinia与Vuex：Vue状态管理工具对比

GGBOND2025/11/24大约 4 分钟前端技术Vue

Pinia与Vuex：Vue状态管理工具对比

前言

Vue 3推出后，状态管理领域迎来新变化。Pinia作为Vue官方推荐的新一代状态管理库，逐渐成为开发者的首选。本文将对比Pinia与Vuex的特点和使用场景，帮助你做出合适选择。

1. 基本概念

1.1 Vuex

Vue.js官方状态管理库，专为Vue.js设计，采用集中式存储管理应用的所有组件的状态。

1.2 Pinia

Vue官方推荐的新一代状态管理库，由Vue核心团队维护，提供更简洁的API和更好的TypeScript支持。

2. 核心特性对比

特性VuexPinia
Vue版本支持Vue 2/3Vue 2/3（推荐Vue 3）
TypeScript支持需要额外配置原生支持，类型推断更好
Mutations必需不需要，直接修改状态
模块化嵌套模块扁平化store设计
代码分割动态注册模块自动代码分割
学习曲线较陡峭较平缓

3. 代码实现对比

3.1 Vuex实现

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

export default createStore({
  state: {
    count: 0,
    user: null
  },
  getters: {
    doubleCount: state => state.count * 2,
    isAuthenticated: state => !!state.user
  },
  mutations: {
    increment(state) {
      state.count++
    },
    setUser(state, user) {
      state.user = user
    }
  },
  actions: {
    async login({ commit }, credentials) {
      const user = await api.login(credentials)
      commit('setUser', user)
    },
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})
// 在组件中使用
import { useStore } from 'vuex'
import { computed } from 'vue'

export default {
  setup() {
    const store = useStore()
    
    const count = computed(() => store.state.count)
    const doubleCount = computed(() => store.getters.doubleCount)
    
    const increment = () => store.commit('increment')
    const login = (credentials) => store.dispatch('login', credentials)
    
    return { count, doubleCount, increment, login }
  }
}

3.2 Pinia实现

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

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    user: null
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
    isAuthenticated: (state) => !!state.user
  },
  actions: {
    increment() {
      this.count++
    },
    async login(credentials) {
      this.user = await api.login(credentials)
    },
    incrementAsync() {
      setTimeout(() => {
        this.count++
      }, 1000)
    }
  }
})
// 在组件中使用
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'

export default {
  setup() {
    const counterStore = useCounterStore()
    
    // 使用storeToRefs保持响应性
    const { count, doubleCount } = storeToRefs(counterStore)
    
    // 直接调用actions
    const increment = () => counterStore.increment()
    const login = (credentials) => counterStore.login(credentials)
    
    return { count, doubleCount, increment, login }
  }
}

4. 主要区别详解

4.1 Mutations的去除

在Pinia中，不再需要mutations，可以直接在actions中修改状态：

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

// Pinia - 直接修改
actions: {
  increment() {
    this.count++  // 直接修改状态
  }
}

4.2 模块化设计

Vuex使用嵌套模块，而Pinia采用扁平化store设计：

// Vuex - 嵌套模块
modules: {
  user: {
    namespaced: true,
    state: () => ({ name: '' }),
    mutations: { /* ... */ },
    actions: { /* ... */ }
  },
  cart: {
    namespaced: true,
    state: () => ({ items: [] }),
    mutations: { /* ... */ },
    actions: { /* ... */ }
  }
}

// Pinia - 扁平化store
// stores/user.js
export const useUserStore = defineStore('user', {
  state: () => ({ name: '' }),
  actions: { /* ... */ }
})

// stores/cart.js
export const useCartStore = defineStore('cart', {
  state: () => ({ items: [] }),
  actions: { /* ... */ }
})

4.3 TypeScript支持

Pinia提供更好的TypeScript支持：

// stores/user.ts
interface UserState {
  name: string
  email: string
}

export const useUserStore = defineStore('user', {
  state: (): UserState => ({
    name: '',
    email: ''
  }),
  getters: {
    fullName: (state): string => `${state.name} (${state.email})`
  },
  actions: {
    async fetchUser(id: number): Promise<void> {
      const user = await api.getUser(id)
      this.name = user.name
      this.email = user.email
    }
  }
})

// 在组件中使用时，有完整的类型推断
const userStore = useUserStore()
// userStore.name 会被正确推断为string类型

5. 如何选择

5.1 选择Pinia的情况

  • 使用Vue 3开发新项目
  • 需要更好的TypeScript支持
  • 希望更简洁的API和更少的样板代码
  • 需要更好的开发体验和调试支持

5.2 选择Vuex的情况

  • 维护现有的Vue 2项目
  • 团队已经熟悉Vuex的工作方式
  • 项目依赖Vuex特定的插件或生态

5.3 迁移建议

  1. 渐进式迁移：可以同时使用Vuex和Pinia，逐步迁移
  2. 功能对等：Pinia提供了Vuex的所有核心功能
  3. 学习成本：Pinia的学习曲线更平缓，团队适应较快

6. 实际应用示例

6.1 购物车示例（Pinia）

// Vuex实现
const store = new Vuex.Store({
  state: {
    cartItems: []
  },
  getters: {
    cartTotal: state => state.cartItems.reduce((total, item) => total + item.price * item.quantity, 0),
    cartItemCount: state => state.cartItems.reduce((count, item) => count + item.quantity, 0)
  },
  mutations: {
    ADD_TO_CART(state, product) {
      const existingItem = state.cartItems.find(item => item.id === product.id)
      if (existingItem) {
        existingItem.quantity++
      } else {
        state.cartItems.push({ ...product, quantity: 1 })
      }
    }
  },
  actions: {
    addToCart({ commit }, product) {
      commit('ADD_TO_CART', product)
    }
  }
})

// Pinia实现
export const useCartStore = defineStore('cart', {
  state: () => ({
    cartItems: []
  }),
  getters: {
    cartTotal: state => state.cartItems.reduce((total, item) => total + item.price * item.quantity, 0),
    cartItemCount: state => state.cartItems.reduce((count, item) => count + item.quantity, 0)
  },
  actions: {
    addToCart(product) {
      const existingItem = this.cartItems.find(item => item.id === product.id)
      if (existingItem) {
        existingItem.quantity++
      } else {
        this.cartItems.push({ ...product, quantity: 1 })
      }
    }
  }
})

7. 性能对比

7.1 包大小

  • Vuex: 约13KB (gzipped)
  • Pinia: 约6KB (gzipped)

Pinia的包体积更小，这对于性能敏感的应用是一个优势。

7.2 运行时性能

两者在运行时性能上差异不大，但Pinia的扁平化结构可能在某些场景下有轻微的性能优势。

8. 总结

Pinia作为Vue的新一代状态管理库，在API设计、TypeScript支持和开发体验方面都有显著优势。对于新项目，特别是使用Vue 3的项目，Pinia是更好的选择。然而，Vuex仍然是成熟、稳定的状态管理解决方案，对于现有项目或特定需求仍然有其价值。

无论选择哪个，重要的是根据项目需求、团队技术栈和长期维护考虑做出决策。状态管理工具只是手段，构建可维护、高性能的应用才是最终目标。

参考资源

Copyright © 2025 GGBOND