vue3中vuex与pinia的踩坑笔记记录

⽬录

介绍

安装使⽤简单对⽐写法差异与共同点Vuex和Pinia的优缺点何时使⽤Pinia，何时使⽤Vuex总结

介绍

Pinia 是 Vue.js 的轻量级状态管理库，最近很受欢迎。它使⽤ Vue 3 中的新反应系统来构建⼀个直观且完全类型化的状态管理库。Pinia的成功可以归功于其管理存储数据的独特功能(可扩展性、存储模块组织、状态变化分组、多存储创建等)。

另⼀⽅⾯，Vuex也是为Vue框架建⽴的⼀个流⾏的状态管理库，它也是Vue核⼼团队推荐的状态管理库。Vuex⾼度关注应⽤程序的可扩展性、开发⼈员的⼯效和信⼼。它基于与Redux相同的流量架构。

安装使⽤

安装 vuex

npm install vuex@next --savecnpm install vuex@next --save-yarn add vuex@next --save安装 pinia

npm install pinia@nextcnpm install pinia@nextyarn add pinia@next

装完直接根据下⾯的写法来⽤就⾏了，只要你会⽤ vuex，你就等于你会⽤ pinia 的基本⽤法了，这边不展⽰ pinia 的插件写法

简单对⽐写法差异与共同点

vuex 和 pinia 是同团队成员编写，但是 pinia 写法上更加⼈性化，也更简单vuex在vue3中的写法和⽤法

// store.js

import { createStore } from 'vuex'export default createStore({ // 定义数据 state: { a:1 }, // 定义⽅法 mutations: {

xxx(state,number){ state.a = number } },

// 异步⽅法 actions: { }, // 获取数据

getters: { getA:state=>return state.a }})

// 在vue3中使⽤