tassioFront / vuex-typescript-ways

Checking best way to import vuex modules on components in Vue-TypeScript projects. it considering: clean-code, legibility and performance. UPDATED: way to use TypeScript with Jest/Computed/Watch/Prop and typing vuex on importing.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Vuex-typescript-Jest

Diference between Normal Vuex import vs Vuex-class lib. I have maked some examples with Jest/Computed/Watch/Prop, Vuex and TypeScript.

Summary

Description

Checking best way to import Vuex modules on components in Vue-TypeScript projects. it considering: clean-code, legibility and performance.

In this test example, I have used method from vuex used on components.

Requirements

Enviorements

http://localhost:8080 to see project running
http://127.0.0.1:8888 to see Bundles (filter by js/Normal.js and js/Class.js)

Stack

Conclusion

Clean code: Notably, vuex-class has a code cleaner than normal import.

Legibility: Draw here. Its depends on your Developer background.

Performance: Its hard to meansure the real final impact here, cause depends on your way to build aplication and of context. But, as you can see on webpack-analyzer, vuex-class has maker smallers bundle than normal import.

Webpack Analyzer results

Screenshot

About

Checking best way to import vuex modules on components in Vue-TypeScript projects. it considering: clean-code, legibility and performance. UPDATED: way to use TypeScript with Jest/Computed/Watch/Prop and typing vuex on importing.


Languages

Language:Vue 49.6%Language:TypeScript 31.0%Language:JavaScript 14.3%Language:CSS 2.8%Language:HTML 2.3%