/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.

Primary LanguageVue

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