网络日志

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') { %>
       <script src="http://localhost:8098"></script>
       <% } %>
  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]",
       },
      },
      },
       },