Pinia 和 Vuex 的区别。

gxw_viva

已于 2024-03-04 16:43:28 修改

阅读量852

点赞数 22

分类专栏： pinia学习笔记文章标签： javascript 前端 vue.js

于 2024-03-04 16:24:45 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43995143/article/details/136455325

版权

pinia学习笔记专栏收录该内容

7 篇文章

订阅专栏

本文比较了Vue3的轻量级状态管理库Pinia与Vuex在模块化、API、体积、版本支持及特点上的异同，强调了Pinia的简洁易用和Vuex的全面功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是Pinia？

Pinia是一个轻量级的状态管理库，专注于提供简单的API来管理应用程序的状态，它基于Vue 3的Composition API构建，提供了更加灵活和可组合的状态管理方式，支持多个store实例。

什么是 Vuex？

Vuex是一种状态管理模式和库，构建为集中式存储，可帮助你维护 Vue 应用程序中存在的所有组件的状态。Vuex 遵循确保你的状态突变为预测标准的规则。使 Vuex 更强大的一个因素是组件从 Vuex store 中获取它们的状态，并且可以快速有效地响应 store 状态的变化。而Vuex是一个更完整的状态管理库，提供了模块化、插件和严格模式等功能，它基于Vue 2的Options API构建，只支持一个store实例。

Pinia 的特点

模块化。Pinia通过defineStore来单独创建store实例，每个store实例都是独立的，没有命名空间，而Vuex使用全局store来管理所有的状态，组件通过store对象来获取和修改状态。235
语法和使用。Pinia的语法比Vuex更容易理解和使用，提供了更好的TypeScript支持，而Vuex的接口和功能集更为完整、复杂。
体积。Pinia的体积相对较小，约1KB，而Vuex的体积较大。2
版本支持。Pinia当前最新版是2.x，既支持Vue2也支持Vue3，Vuex当前最新版是4.x，用于Vue3，Vuex3用于Vue2。
Pinia 是可扩展的，Pinia 还提供了一个完整的插件系统，具有交易和本地存储同步等功能，适用于 Pinia 默认行为不足的情况。

Vuex的特点

模块，当您的应用程序扩展时，遍历变得很困难。但是，使用 Vuex 模块，您可以根据领域功能将您的商店拆分为多个文件，并从该特定命名空间中的模块访问状态循环。
开发工具支持，Vue devtools 中的 Vuex 选项卡允许我们查看状态并跟踪我们的变化。这使我们能够快速评估我们的程序如何执行和调试错误。
热重载，Vuex支持热重载功能，它使用 webpack 的热模块替换 API，可以在您开发时快速重载您的 mutations、modules、action 和 getters。
TypeScript 支持，如果你想编写一个 TypeScript 存储定义，Vuex 可以提供它的类型并且更容易实现。它有一个默认的 TypeScript 配置，不需要额外的设置。
Pinia和Vuex的代码对比，Pinia 是一个轻量级库，可帮助您管理整个应用程序的反应状态。与 Vuex 相比，Pinia API 易于学习，使您的代码更易于阅读。

让我们看一下使用 Pinia 和 Vuex 管理我们的状态的代码比较：

import { createStore } from 'vuex'

const TodoListstore = createStore({
  state() {
    return {
      todoListItems: []
    }
  },
  actions: {
    addNewList({ commit }, item) {
    {
      commit('createNewItem', item)
    }
  },
  mutations: {
    createNewItem(state, item) {
      state.todoListItems.push(item)
    }
  }
})

如果你看上面的代码，你可以看到 Vuex 存储中的三个动作：状态、动作和突变。状态返回当前的todoListItems，动作提交一个突变来创建一个新项目，最后，突变创建新项目并将其添加到列表中。当你构建一个更大的应用程序时，你可能会意识到动作和突变相对相似，导致冗余代码，因为每个状态变化都需要一个样板。

使用 Pinia 简单 API，您可以消除突变和冗余代码。让我们查看一个代码示例，了解当您使用 Pinia 实现之前的代码时的样子：

import { defineStore } from 'pinia'

export const useListStore = defineStore('list', {
  state() => ({
    return {
      todoListItems: []
    }
  }),
  actions: {
    addNewList() {  
      this.todoListItems.push(item)
    }
  }})