vite最近非常火，它是vue作者尤大神发布前端构建工具，底层基于Rollup，无论是启动速度还是热加载速度都非常快。vite随vue3正式版一起发布，刚开始的时候与vue绑定在一起，但之后的v2版本便比较独立，vite不仅支持vue，还支持React、Preact、Vanilla等前端库。由于vite出现的时间不是很久，基于vite创建的项目没有vue-cli那么完整，如果要使用vue全家桶、ESLint等，还需要开发人员手动添加和配置，步骤稍多，略繁琐。虽然在创建项目时可以选择Customizewithcreate-vue，但我由于网络问题，一直没有成功过。所以我封装了一个cli用于快速创
vite最近非常火，它是vue作者尤大神发布前端构建工具，底层基于Rollup，无论是启动速度还是热加载速度都非常快。vite随vue3正式版一起发布，刚开始的时候与vue绑定在一起，但之后的v2版本便比较独立，vite不仅支持vue，还支持React、Preact、Vanilla等前端库。由于vite出现的时间不是很久，基于vite创建的项目没有vue-cli那么完整，如果要使用vue全家桶、ESLint等，还需要开发人员手动添加和配置，步骤稍多，略繁琐。虽然在创建项目时可以选择Customizewithcreate-vue，但我由于网络问题，一直没有成功过。所以我封装了一个cli用于快速创
文章目录1前言2持久化存储2.1安装依赖2.2新增store文件2.3修改main.ts文件2.4持久化存储测试3高级配置3.1存储所有变量3.2存储部分变量1前言本文使用Pinia及插件pinia-plugin-persist做持久化存储，避免修改store后还需要手动修改storage本文弃用插件pinia-plugin-persistedstate，该插件无法配置一个store中的变量分别存储于localStorage和sessionStorage2持久化存储2.1安装依赖pnpmipinia//安装piniapnpmipinia-plugin-persist//安装持久化存储插件2.2
pinia是什么？Pinia是Vue.js的轻量级状态管理库官方网站：Pinia中文文档: 介绍|Pinia中文文档pinia与vuex4相同是vue官方状态管理工具(作者是Vue核心团队成员）是vue开发者工具支持pinia不同pinia相比vuex4，对于vue3的兼容性更好pinia相比vuex4，具备完善的类型推荐 =>对TS支持很友好Pinia的API设计非常接近Vuex5的提案。 vuex只能有一个根级别的状态, pinia直接就可以定义多个根级别状态pinia核心概念state:状态actions:修改状态（包括同步和异步，pinia中没有mutations）getters:计算
👏作者简介：大家好，我是小童，Java开发工程师，CSDN博客博主，Java领域新星创作者📕系列专栏：前端、Java、Java中间件大全、微信小程序、微信支付、若依框架、Spring全家桶📧如果文章知识点有错误的地方，请指正！和大家一起学习，一起进步👀🔥如果感觉博主的文章还不错的话，请👍三连支持👍一下博主哦🍂博主正在努力完成2023计划中：以梦为马，扬帆起航，2023追梦人 目录为什么要使用Pinia？项目中引入Pinia核心概念-State 核心概念-修改状态 核心概念-Getters核心概念-Actions 为什么要使用Pinia？Pinia是Vue的存储库，它允许您跨组件/页面共享
文章目录Pinia状态管理Pinia和Vuex的对比Pinia基本使用🍤创建Pinia🍤创建StorePinia核心概念State🍟state基本使用🍟state其他操作Pinia核心Getters🍕getters基本使用🍕getters其他操作Pinia核心Actions🥧Actions基本使用🥧Actions异步操作Pinia状态管理Pinia和Vuex的对比Pinia（发音为/piːnjʌ/，如英语中的“peenya”）是最接近piña（西班牙语中的菠萝）的词；Pinia开始于大概2019年，最初是作为一个实验为Vue重新设计状态管理，让它用起来适合组合式API（CompositionA
文章目录前情提要应用场景实战解析1、控制添加路由2、实践观察3、控制功能4、解决异步路由问题最后前情提要作为项目经验稀少的vue开发者来说，在关键技术点上的经验不多，我希望通过我的思想和实践，把好的东西分享在这里，目的是进一步促进技术交流。项目即将完成，权限是最后的收尾工作，好的权限实现方案，可以让我们没有后顾之忧，也可以提升项目的运行速度。应用场景在开发之前，我粗略的浏览了一些权限实现方法，可以说智者见智吧，例如一种实现方案是在router的守卫里判断，我认为虽然实现了功能，但是增加了路由的功能压力。我们的需求是登录后即获知权限，根据权限提供功能；根据以上俩点需求我做出了如下计划：找一个合适
文章目录前情提要应用场景实战解析1、控制添加路由2、实践观察3、控制功能4、解决异步路由问题最后前情提要作为项目经验稀少的vue开发者来说，在关键技术点上的经验不多，我希望通过我的思想和实践，把好的东西分享在这里，目的是进一步促进技术交流。项目即将完成，权限是最后的收尾工作，好的权限实现方案，可以让我们没有后顾之忧，也可以提升项目的运行速度。应用场景在开发之前，我粗略的浏览了一些权限实现方法，可以说智者见智吧，例如一种实现方案是在router的守卫里判断，我认为虽然实现了功能，但是增加了路由的功能压力。我们的需求是登录后即获知权限，根据权限提供功能；根据以上俩点需求我做出了如下计划：找一个合适
把socket实例挂载到全局为方便梳理，请忽略typescript#main.tsimport{createApp}from'vue'importAppfrom'./App.vue'import{socket}from"@/xihu/socket"importrouterfrom"@/xihu/router"constapp=createApp(App);app.use(router).mount('#root');//全局挂载app.config.globalProperties.$socket=socket;Socket封装(断线重连)这个WebSocket类封装了WebSocket的连接
pinia和vuex的区别（1）pinia它没有mutation,他只有state，getters，action【同步、异步】使用他来修改state数据 （2）pinia他默认也是存入内存中，如果需要使用本地存储，在配置上比vuex麻烦一点 （3）pinia语法上比vuex更容易理解和使用，灵活。 （4）pinia没有modules配置，没一个独立的仓库都是definStore生成出来的 （5）piniastate是一个对象返回一个对象和组件的data是一样的语法Vuex和Pinia的优缺点Pinia的优点完整的TypeScript支持：与在Vuex中添加TypeScript相比，添加Type
