FE.SRC - Vue3 + pinia 开发感受与踩坑记录

个人踩坑 vue3+pinia 1个月后整体评分：
vue3
上手容易 ★★★★☆ 写过react的上手更容易
开发友好 ★★★★☆ 部分插件版本单独控制

pinia
上手容易 ★★★★★ 写过vuex的上手更容易
开发友好 ★★★★★ 类型声明友好

以下记录体验新玩具的一些使用感受与一些开发中遇到的坑。

感受

• 之前一直习惯vue class style component,现在换成 defineComponent更类似于react function component.整体开发上没有受影响
• pinia在 组件setup生命周期里useStore()创建直接使用，包括vue-router也用useRouter的方式,整体上手复杂度和Vuex的import大同小异。
• 在类型声明上pinia更具优势，能够在vue组件tsx中获得很好的类型声明提示，前提是在pinia store中都要手动标注。特别是action的返回类型。
• pinia store的声明比vuex减少了mutation的模型部分。在store建数据模型时可以更合理的抽象业务模型，也避免了action-mutation才能修改state的麻烦。当然这样也有坏处，原项目中复杂的mutation相当于要单独抽离成filter之类的概念，但这种filter也不会很多，直接修改state还是比较方便的，除非前后端的数据转换特别多。
• 当把 attrs,slots,emit 写成setup生命周期入参时，仿佛又回到了angular scope依赖注入的感觉，对开发影响不大，只是每个文件多了一行而已，写法从this.$xxx改成直接写emit之类的反而更简短。
• 如果是复制模板文件很容易忘记改defineComponent里的name参数，也就是组件名称。对业务不影响但在vue-devtool里会显示成相同的组件名称，不容易排查。

遇到的坑

1. 对 vue-svg-loader 锁版本

   • 使用"vue-svg-loader": "0.17.0-beta.2"

   • 配置 vue.config.js如下：

     chainWebpack: (config) => {
     // vue-svg-loader
     const svgRule = 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");
     },

2. 对pinia 锁版本

   • 使用"pinia": "^2.0.0-rc.0"

3. vue3 和目前的浏览器插件devtool 有冲突，

   • 需要下载beta版的vue-devtool (BUGFIX Vue.js devtools 5.0.0 beta 3 fix)

   • 如果嫌2个vue devtool切换不方便，可以自行安装vue-devtool,并配置到html模板；例如：

      <% if (process.env.NODE_ENV==='development') { %>
      
      <% } %>

4. vue router 新写法匹配其他路由

   {
    path: "/:pathMatch(.*)*",
    name: "NotFound",
    component: NotFoundPage,
     },

5. css module支持：

   • 配置vue.config.js

     css: {
     requireModuleExtension: true,
     loaderOptions: {
     css: {
      modules: {
        localIdentName: NODE_ENV === "development" ? "[path]-[local]" : "[local]-[hash:4]",
      },
     },
     },
      },