为什么建议你用 Pinia 替换 Vuex？

最新推荐文章于 2025-09-10 10:48:27 发布

原创最新推荐文章于 2025-09-10 10:48:27 发布 · 2.1k 阅读

47 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #css

Pinia被Vue.js官方推荐为状态管理工具，相较于Vuex，它提供了更强的自动补全、DevTools支持、热模块替换、SSR支持和可扩展性。Pinia的API设计直观， TypeScript支持更好，且舍弃了Mutations和模块，拥有更好的模块结构。尽管Vuex有模块化和HMR支持等优点，但Pinia的诸多优势使其成为Vue项目的新选择。

在这里插入图片描述

在 Vue.js 项目状态管理技术选型时，经常会遇到选择 Vuex 还是 Pinia 的问题。Pinia 被 Vue.js 官方网站列为 Vue.js 的推荐状态管理工具，这可能是它被受欢迎的原因之一。在本文中，将对 Pinia 和 Vuex 进行详细的对比，阐述它们的独特功能、预期用途以及优缺点，希望对您的项目技术选型有所帮助。

1.基本介绍

1.1.Pinia

Pinia 是新一代状态管理工具，它允许您在 Vue.js 组件间跨组件或页面共享状态。它也是目前官网推荐的全局状态管理工具。Vue 核心团队成员 Eduardo San Martin Morote 设计了 Pinia。通过使用新的响应性机制，Pinia 构建了一个易于使用且具有适当类型的状态管理系统，是管理应用程序响应式状态的一个优秀库。与 Vuex 相比，Pinia 的 API 学习曲线更平缓，让您的代码更易读。

使用 Pinia 创建一个 store示例：

import { defineStore } from 'pinia'

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

1.2.Vuex

Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex 中创建一个 store 示例：

import { createStore } from 'vuex'

const counterstore = createStore({
  state() {
    return {
      todoListItems: []
    }
  },
  getters: {
    countList(state) {
      return state.todoListItems.length()
    }
  },
  actions: {
    addNewToList({commit}, item) {
      commit('createNewItem', item)
    }
  },
  mutations: {
    createNewItem(state, item) {
      state.todoListItems.push(item)
    }
  }
})

2.Pinia vs Vuex 优缺点对比

2.1.Pinia 优点

🎉 强大的自动补全：Pinia 为 TypeScript 提供了强大的支持，包括针对 JavaScript 的强大自动补全功能，大大简化了开发过程。开发人员可以快速编写代码并避免常见错误，从而提高代码质量并缩短开发时间。
🎉 DevTools支持：Pinia 为 Vue devtools 提供了出色的支持，允许开发人员轻松调试和监控其应用程序的状态及变更。
🎉 热模块替换：通过热模块替换，开发人员可以对代码进行更改，而更改会立即反映在运行的应用程序中，从而改进开发工作流程并缩短开发时间。如果没有 Pinia，全局状态可能会在 HMR 期间被破坏和重置，但 Pinia 会保留它。
🎉 支持 SSR：Pinia 支持服务器端渲染（SSR），使开发人员能够在 SSR Vue.js框架（如 Nuxt）中使用 Pinia。
🎉 可扩展性：Pinia store 可通过底层 API 进行全面扩展。利用插件，您可以执行本地 localStorage 同步、ORM（对象关系映射）、定义存储时添加选项等任务，当 Pinia 的默认行为无法满足您的需求时，您还可以利用更多插件。您可以开始使用或根据自己的需要创建插件。

2.2.Vuex 优点

👍🏻 模块化机制：通过利用 Vuex 模块化特性，我们可以根据业务需求将状态分为几个文件（一般考虑以页面为单位划分），您可以使用命名空间管理模块中的状态周期。随着应用程序的增长，可以引入模块按需加载策略，进一步提升页面加载性能。
👍🏻 HMR 支持：Vuex 支持热重载功能，利用 webpack 的热模块替换 API，可以在开发代码时快速重新加载state、mutations、action 和getter。
👍🏻 DevTools支持：可以使用 Vue devtools 中的 Vuex 选项卡方便地访问和调试mutation，以及查看状态，为我们提供了一种轻松跟踪应用程序状态的方法。