个人坑了1个月的vue3+pinia总体评价：Vue3好学★★★★☆写过react的更容易开发友好★★★★☆部分插件版本单独控制pinia。上手很容易。★★★★★vuex更容易上手。它更容易开发和友好。★★★★★类型声明很友好。感觉之前习惯了vueclass风格的组件，现在改成defineComponent更像是react函数组件。整体发展不受影响。Pinia是通过useStore()在组件设置生命周期中直接创建和使用的，包括vue-router和useRouter。整体上手的复杂度和Vuex的导入差不多。Pinia在类型声明上更有优势，在vue组件tsx中可以得到很好的类型声明提示，前提是必须在piniastore中手动标注。特别是动作的返回类型。piniastore的声明相比vuex减少了mutation的model部分。在商店建立数据模型时，可以更合理地抽象业务模型，通过action-mutation可以避免修改状态的麻烦。当然，这也有缺点。原项目中复杂的突变，相当于被拆分成过滤器等概念，但这样的过滤器并不多。直接修改状态比较方便，除非前后端有大量的数据转换。当attrs、slots、emit写成setup生命周期入参时，似乎又回到了angularscope依赖注入的感觉，对开发影响不大，只是每个文件多了一行，写法变了从this.$xxx到direct写emit之类的比较短。如果复制模板文件，很容易忘记更改defineComponent中的name参数，即组件名称。不影响业务，但在vue-devtool中会显示为同名组件，不易排查。遇到的坑使用"vue-svg-loader":"0.17.0-beta.2"forvue-svg-loaderlockversion配置vue.config.js如下：chainWebpack:(config)=>{//vue-svg-loaderconstsvgRule=config.module.rule("svg");svgRule.uses.clear();svgRule.delete("type");svgRule.delete("generator");svgRule.use("vue-loader").loader("vue-loader").end().use("vue-svg-loader").loader("vue-svg-loader");}，pinia锁版本使用“pinia”："^2.0.0-rc.0"vue3与当前浏览器插件devtool冲突，不方便切换需要下载测试版vue-devtool(BUGFIXVue.jsdevtools5.0.0beta3fix)两个vuedevtools，可以自己安装vue-devtool，配置到html模板中；例如：<%if(process.env.NODE_ENV==='development'){%><%}%>vuerouter的新方式写入匹配其他路由{path:"/:pathMatch(.*)*",name:"NotFound",component:NotFoundPage,},css模块支持：配置vue.config。jscss:{requireModuleExtension:true,loaderOptions:{css：{模块：{localIdentName：NODE_ENV===“开发”？“[路径]-[本地]”：“[本地]-[哈希：4]”，}，}，}，}，
