Vuex和Pinia都是vue.js的状态管理工具，Vuex是vue2使用，而在vue3推荐了Pinia, 那pinia和vuex的有什么区别呢？
主要有以下几点区别：
它没有mutation,他只有state，getters，action【同步、异步】使用他来修改state数据
他默认也是存入内存中，如果需要使用本地存储，在配置上比vuex麻烦一点
语法上比vuex更容易理解和使用，灵活。
pinia没有modules配置，没一个独立的仓库都是definStore生成出来的、
state是一个对象返回一个对象和组件的data是一样的语法
介绍
Pinia 是 Vue.js 的轻量级状态管理库，它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库。
Vuex也是为Vue框架建立的一个流行的状态管理库，它也是Vue核心团队推荐的状态管理库。 Vuex高度关注应用程序的可扩展性、开发人员的工效和信心。它基于与redux相同的流量架构。
安装
pinia安装
pinia很容易上手，因为他只需要安装和创建一个store
安装命令：
yarn add pinia@next npm install pinia@next cnpm install vuex@next --save-
设置为全局对象，在main.js中引用
import { createPinia } from "pinia";// 创建pinia实例const pinia = createPinia()app.use(pinia)
vuex安装
Vuex 也很容易，需要安装和创建store。
npm install vuex@next --save yarn add vuex@next --save cnpm install pinia@next
在根目录下引用
import {useStore} from './store'app.use(store)
创建
pinia创建
// stores/todo.jsimport { defineStore } from 'pinia'export const useTodoStore = defineStore({
id: 'todo',
state: () => ({ count: 0, title: "Cook noodles", done:false })})
vuex创建
//store.jsimport {createStore} from 'vuex'const useStore = createStore({
state: {
todos: [
{ id: 1, title: '...', done: true }
]
},
getters: {
doneTodos (state) {
return state.todos.filter(todo => todo.done)
}
}})
两者写法对比
vuex 和 pinia 是同团队成员编写，但是 pinia 写法上更加人性化，也更简单
pinia在vue3中的写法和用法
// store.jsimport { defineStore } from "pinia"// defineStore 调用后返回一个函数，调用该函数获得 Store 实体export const GlobalStore = defineStore({
// id: 必须的，在所有 Store 中唯一
id: "myGlobalState",
// state: 返回对象的函数
state: () => ({
a: 1,
}),
getters: {},
actions: {
setXXX(number) {
this.a = number;
},
},});// 在vue3中使用<template>
<div>
{{number}}
<button @click="clickHandle">按钮</button>
</div></template><script>import {GlobalStore} from "@/store/store.js"export default {
setup(){
let store = GlobalStore();
//如果直接取state的值必须使用computed才能实现数据的响应式 如果直接取 store.state.a 则不会监听到数据的变化，或者使用getter，就可以不使用computed (这边和vuex是一样的)
let number = computed(()=>store.a)
const clickHandle = () => {
store.setXXX("100")
}
return{number,clickHandle}
}}<script>
vuex在vue3中的写法和用法
// store.jsimport { createStore } from "vuex"export default createStore({
// 定义数据
state: { a:1 },
// 定义方法
mutations: {
xxx(state,number){
state.a = number }
},
// 异步方法
actions: { },
// 获取数据
getters: { getA:state=>return state.a }})// 在vue3中使用<template>
<div>
{{number}}
<button @click="clickHandle">按钮</button>
</div></template><script>import {useStore} from "vuex"export default {
setup(){
let store = useStore()
//如果直接取state的值必须使用computed才能实现数据的响应式 如果直接取 store.state.a 则不会监听到数据的变化，或者使用getter，就可以不使用computed
let number = computed(()=>store.state.a)
const clickHandle = () => {
store.commit("xxx","100")
}
return{number,clickHandle}
}}<script>
由此两个代码的对比我们可以看出使用 pinia 更加的简洁，轻便。pinia 取消了原有的 mutations，合并成了 actions，且我们在取值的时候可以直接点到那个值，而不需要在.state，方法也是如此。
Vuex 和 Pinia 的优缺点
Pinia的优点
完整的 TypeScript 支持：与在 Vuex 中添加 TypeScript 相比，添加 TypeScript 更容易
极其轻巧(体积约 1KB)
store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或 MapAction 辅助函数，这在 Vuex 中很常见
支持多个Store
支持 Vue devtools、SSR 和 webpack 代码拆分
Pinia的缺点
不支持时间旅行和编辑等调试功能
Vuex的优点
支持调试功能，如时间旅行和编辑
适用于大型、高复杂度的Vue.js项目
Vuex的缺点
从 Vue 3 开始，getter 的结果不会像计算属性那样缓存
Vuex 4有一些与类型安全相关的问题
何时使用Pinia，何时使用Vuex
个人感觉：，由于Pinea是轻量级的，体积很小，它适合于中小型应用。它也适用于低复杂度的Vue.js项目，因为一些调试功能，如时间旅行和编辑仍然不被支持。
将 Vuex 用于中小型 Vue.js 项目是过度的，因为它重量级的，对性能降低有很大影响。因此，Vuex 适用于大规模、高复杂度的 Vue.js 项目。
