一、Pinia是什么？ Pinia是Vue的存储库，它允许跨组件/页面共享状态。实际上，pinia就是Vuex的升级版，官网也说过，为了尊重原作者，所以取名pinia，而没有取名Vuex，所以大家可以直接将pinia比作为Vue3的Vuex。二、为什么要使用pinia？pinia中只有state、getter、action，抛弃了Vuex中的Mutation，Vuex中mutation一直都不太受小伙伴们的待见，pinia直接抛弃它了，这无疑减少了我们工作量。pinia中action支持同步和异步，Vuex不支持良好的Typescript支持，毕竟我们Vue3都推荐使用TS来编写，这个时
目录一、vuex与pinia特性二、使用pinia2.1安装pinia2.2项目引入2.3创建store2.4使用storegetteraction2.5修改state1、直接修改2、使用$patch3、使用actions2.6storeToRefs一、vuex与piniaPinia最初是为了探索Vuex的下一次迭代会是什么样子，结合了Vuex5核心团队讨论中的许多想法。最终，我们意识到Pinia已经实现了我们在Vuex5中想要的大部分内容，并决定实现它取而代之的是新的建议。可以理解为pinia就是下一代的vuex5，但是vuex团队为了尊重pinia作者对于vuex的开发贡献，就直接使用pi
最终效果一、前言Wocwin-Admin，是基于Vue3.2、TypeScript、Vite、Pinia、Element-Plus、Qiankun(微前端)开源的一套后台管理模板；同时集成了微前端qiankun也可以当做一个子应用。项目中组件页面使用了Element-plus二次封装t-ui-plus组件，后期会持续追加权限菜单、按钮管理、微前端配置、还需接入Mock数据实现接口调用模式（目前都是静态JSON数据）。二、在线预览Link：https://wocwin.github.io/wocwin-admin/三、项目功能使用Vue3.2+TypeScript开发，单文件使用setup语法糖
本文为快速搭建vite4项目，一些插件的详情就不做过多的解释，都放有官网链接，需要深入了解的小伙伴可自行查看。至于为什么选择使用vite，因为它具备着快速启动、按需编译、模块热更新的亮点。归根结底最大的特点就是快。vue的创始人是尤雨溪大佬，vite也是他。所以放心大胆的用吧。壹、初始化项目😆😆😆😆1️⃣通过yarn初始化项目yarncreatevite你的项目名称--templatevue-ts注：如果没有yarn的可通过npm执行命令npminstall-gyarn进行安装2️⃣如下图，到这里我们的vite项目就初始化好了，跟着提示，进入ts-super-web(自己的项目名)根目录下执行
目录Pinia的讲解与使用Pinia的安装与使用store数据操作解构store数据actions-getters的使用Pinia常用API持久化插件Pinia的讲解与使用Pinia是由EduardoSanMartinMorote创建的，这是一个轻量级的、使用Vue3CompositionAPI的状态管理库。Pinia于2020年8月正式发布，也就是在Vue3.0.0版本推出后不久，可以说是比较新的一个状态管理解决方案。虽然Pinia是一种相对较新的解决方案，但它受到了许多Vue.js开发者的青睐，并在许多项目中得到广泛应用。官方文档为：https://pinia.vuejs.org/zh/i
使用vue3+pinia2开发仿制chatgpt界面聊天实例Vue3-Chatgpt基于Vue3.x+Pinia2+VueRouter+Vue3-Markdown等技术构建仿ChatGPT网页端聊天程序。支持经典+分栏界面布局、light/dark模式、全屏+半屏显示、Markdown语法解析、侧边栏隐藏等功能。技术框架编辑工具：Cursor框架技术：Vue3+Vite4.x+Pinia2组件库：VEPlus(基于vue3桌面端组件库)国际化多语言：vue-i18n^9.2.2代码高亮：highlight.js^11.7.0本地存储：pinia-plugin-persistedstate^3.
#一、pinia特点1.体积小、性能好、使用简单、限制少2.支持VueDevtools、模块热更新、服务端渲染、Vue2和Vue33.没有mutations，只有state、getters、actions（异步和同步都可）#二、pinia安装配置1.安装```npminstallpinia-S```2.在main.js中注册pinia```jsimport{createPinia}from'pinia'app.use(createPinia())```3.注意事项```js1.pinia的配置是模块化的，通过defineStore()函数的参数来定义不同模块，通过import导入的方式在组件中
首先你完成了如下：[Vite+vue3+Ts+pinia实战（一：初始、基础安装、踩坑）](https://www.jianshu.com/p/1f503a350c38)[Vite+vue3+Ts+pinia开发（二：路由、pinia、UI库安装）](https://www.jianshu.com/p/497af1d9db10)今天就讲讲父子通讯、兄弟通讯，以及ref、reactive的简单使用吧。父传子Ref基础的HelloWorle.vue就有就不多说了。#初始目录：报错位置：login.t
