原标题：Vue官方：Pinia是“Vuex5”咩?
Vue3已经推出很长时间了，它周边的生态也是越来越完善了。之前我们使用Vue2的时候，Vuex可以说是必备的，它作为一个状态管理工具，给我们带来了极大的方便。Vue3推出后，虽然相对于Vue2很多东西都变了，但是核心的东西还是没有变的，比如说状态管理、路由等等。在Vue3中，尤大大推荐我们使用Pinia来实现状态管理。
那么Pinia和vuex有什么区别呢，我们先来简短的回顾一下vuex。
一、vuex
下面是vuex工作原理示意图：
在 Vuex store（仓库）中，有4个主要组件。
State:这只是一个包含实际状态的对象。我们可以在开发工具中看到这个状态，如果想保留这个状态用于缓存或其他目的，也可以保存这个对象。
Getters:可以被认为是计算过的属性，应该被用来从状态中获得一个修改过的响应。
Mutations:是唯一会真正同步改变状态的函数。Mutations 使用关键字commit来调用
Actions:是执行异步任务的函数。它们是由关键字dispatch发起的。
二、Pinia
Pinia意为菠萝，表示与菠萝一样，由很多小块组成。在Pinia中，每个store都是单独存在，一同进行状态管理。
不难看出，Pinia和Vuex的作用是一样的，它也充当的是一个存储数据的作用，存储在pinia的数据允许我们在各个组件中使用。
实际上，Pinia就是Vuex的升级版，官网也说过，Pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子，结合了 Vuex 5 核心团队讨论中的许多想法。很多人也将Pinia称为Vuex5，vuex将不再迭代。
与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。
2.1 Pinia工作原理
与vuex相比，Pinia工作原理如下
整体架构比 Vuex 更简单，更容易理解。一个Pinia store 有3个主要组成部分:
State:与Vuex的定义一样。
Actions:这里的 Actions 与Vuex中的 Actions 和 mutations 的工作相同。这些函数是改变状态的唯一方式。如果想从外部API获取数据并更新状态，也可以使用 actions 。
Getters:getter 完全等同于 Store 状态的计算属性。
Pinia基本使用
1. 创建vue3的项目
//利用vue-cli创建一个Pinia项目（这里选择创建vue3项目）
vue create pinia-project
//在项目中安装pinia
npm install pinia
可以在 package.json ，看看里面的 dependencies 是否成功加入了 Pinia 和它的版本号
{
“dependencies”: {
“pinia”: “^2.0.30”,
},
}
2. 在项目中导入Pinia
import { createApp } from vue
import App from ./App.vue
import { createPinia } from pinia // 导入pinia
//需要注意的是从pinia中结构出来的createPinia是一个函数,挂载需要先调用执行
const app = createApp(App)
app.use(createPinia()) // 使用pinia
app.mount(#app)
将Pinia添加到Vue项目中，这样你就可以在你的代码中使用Pinia的全局对象。
3.配置状态管理专用文件，在根目录下创建一个store文件，并新建一个index.js文件
import {defineStore} from pinia;
// id：必须的，保证在Store中唯一, 两种写法
// export const piniaStore1 = defineStore(userId, {});
// export const piniaStore2 = defineStore({id: userId,});
export const useStore = defineStore({//需要注意的是，defineStore返回的是一个回调方法
id:test,
state(){ // 存放的就是模块的变量
return {
name:hello pinia,
age:20
}
},
getters:{ // 相当于vue里面的计算属性，可以缓存数据
testGetters(){
return this.name+…;//直接利用this便能够获取到里面的内容不需要使用state中间对象
}
},
actions:()=>{ //同步异步方法都在action里处理，可以改变 state 里面的值。
addAge(){
this.age+=1;//actions里的this就指代store
}
}
})
Store 是使用 defineStore() 定义的，并且它需要一个唯一名称，作为第一个参数传递。defineStore函数接收两个参数name、options：
name：一个字符串，必传项，该store的唯一id。
options：其中 state 用来存储全局状态，它必须是箭头函数，为了在服务端渲染的时候避免交叉请求导致的数据状态污染所以只能是函数，而必须用箭头函数则为了更好的 TS 类型推导。
getters 就是用来封装计算属性，它有缓存的功能。
actions 就是用来封装业务逻辑，修改 state。
4.在app.vue组件中使用Pinia
<template>
<div>
{{counter.age}}
{{counter.testGetters}}
<button @click=”counter.age++”>直接累加</button>
<button @click=”counterAdd(1)”>点击</button>
</div>
</template>
<script setup>
import { useStore } from ./store/index
const counter = useStore()
const counterAdd = (num)=>{
counter.addAge(num)
}
</script>
<style scoped>
</style>
注意：store 是一个用reactive 包裹的对象，就像setup 中的props 一样，我们不能对其进行解构。这样拿到的数据不是响应式的。
为了从 Store 中提取属性同时保持其响应式，您需要使用storeToRefs()。它将为任何响应式属性创建 refs。
<template>
<div>{{ age }}</div>
</template>
<script lang=”ts” setup>
import { storeToRefs } from pinia;
import { userStore } from ./store/index;
const { age } = storeToRefs(userStore)
</script>
编写getters有如下两种方式：
getters: {
// 方法一，接收一个可选参数 state
getAddAge(state){
console.log(调用了) // 页面中使用了多次，这里只会执行一次，然后缓存起来了
return state.age+ 1
},
// 方法二，不传参数，使用 this
// 但是必须指定函数返回值的类型，否则类型推导不出来
getAddAge(): number{
return this.age+ 1
}
}
使用getters：
<template>
<p>新年龄：{{ user_store.getAddAge }}</p>
</template>
<script setup lang=”ts”>
import { useStore } from “./store/index”;
const user_store= useStore();
</script>
三、Vuex和Pinia异同点
Pinia和Vuex一样都是是vue的全局状态管理器。其实Pinia就是Vuex5，只不过为了尊重原作者的贡献就沿用了这个看起来很甜的名字Pinia。
Vuex优缺点
Vuex的优点：
支持调试功能，如时间旅行和编辑 适用于大型、高复杂度的Vue.js项目Vuex的缺点：
从 Vue 3 开始，getter 的结果不会像计算属性那样缓存 Vuex 4有一些与类型安全相关的问题Pinia优缺点
Pinia的优点：
完整的 TypeScript 支持：与在 Vuex 中添加 TypeScript 相比，添加 TypeScript 更容易 极其轻巧(体积约 1KB) store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或 MapAction 辅助函数，这在 Vuex 中很常见 支持多个Store 支持 Vue devtools、SSR 和 webpack 代码拆分Pinia的缺点
不支持时间旅行和编辑等调试功能Pinia和vuex使用场景
Pinea是轻量级的，体积很小，它适合于中小型应用。它也适用于低复杂度的Vue.js项目，因为一些调试功能，如时间旅行和编辑仍然不被支持。
将 Vuex 用于中小型 Vue.js 项目是过度的，因为它重量级的，对性能降低有很大影响。因此，Vuex 适用于大规模、高复杂度的 Vue.js 项目。
总结
我们发现实际上，Pinia就是Vuex的升级版，官网也说过比Vuex简洁许多，所以如果我们的项目是新项目的话建议使用Pinia。当然如果我们的项目体量不是很大，我们其实没必要引入vue的状态管理库，盲目的使用反而会徒增负担。返回搜狐，查看更多
责任编辑：