FE.SRC - Vue3 + pinia development experience and pit record

Overall score after 1 month of personal stepping on vue3+pinia:
vue3
Easy to get started ★★★★☆ Those who have written React are easier to start developing and friendly ★★★★☆ Some plugin versions are controlled separately

pinia
Easy to get started ★★★★★ Those who have written vuex are easier to get started with development friendly ★★★★★ Type declaration friendly

The following records some of the experience of using the new toy and some pitfalls encountered in the development.

feel

• I have been used to vue class style component before, and now it is replaced defineComponent which is more similar to react function component. The overall development is not affected
• pinia uses useStore() to create and use it directly in the component setup life cycle, including vue-router, which also uses useRouter. The overall complexity of getting started is similar to that of Vuex import.
• Pinia has more advantages in type declaration, and can get a good type declaration hint in the vue component tsx, provided that it must be manually marked in the pinia store. Specifically the return type of action.
• The declaration of pinia store reduces the model part of mutation than vuex. When building the data model in the store, the business model can be abstracted more reasonably, and the trouble of modifying the state can be avoided by action-mutation. Of course, this also has disadvantages. The complex mutations in the original project are equivalent to being separated into concepts such as filters, but there are not many such filters, and it is more convenient to modify the state directly, unless there are too many data conversions at the front and back ends.
• When attrs, slots, emit are written as setup life cycle parameters, it seems to return to the feeling of angular scope dependency injection, which has little impact on development, but each file has one more line, and the writing method is changed from this.$xxx to direct Writing something like emit is shorter.
• If you copy the template file, it is easy to forget to change the name parameter in defineComponent, which is the component name. It does not affect the business, but it will be displayed as the same component name in vue-devtool, which is not easy to troubleshoot.

pit encountered

1. Lock version to vue-svg-loader

   • Use "vue-svg-loader": "0.17.0-beta.2"

   • Configure vue.config.js as follows:

      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. Version for pinia lock

   • Use "pinia": "^2.0.0-rc.0"

3. vue3 conflicts with the current browser plugin devtool,

   • Need to download the beta version of vue-devtool ( BUGFIX Vue.js devtools 5.0.0 beta 3 fix )

   • If you think it is inconvenient to switch between two vue devtools, you can install vue-devtool and configure it to the html template; for example:

      <% if (process.env.NODE_ENV==='development') { %>
      <script src="http://localhost:8098"></script>
      <% } %>

4. The new way of vue router matches other routes

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

5. css module supports:

   • Configure vue.config.js

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