关于vue.js:FESRC-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]",
      },
     },
     },
      },