Skip to content

Instantly share code, notes, and snippets.

@championswimmer

championswimmer/blog.md Secret

Created July 14, 2018 00:06
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save championswimmer/3e76e4f5d86f4caea80071ed1962f8bd to your computer and use it in GitHub Desktop.
Save championswimmer/3e76e4f5d86f4caea80071ed1962f8bd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
blog.md

Writing Vuex modules in neat Typescript classes

Typescript/ES7 Decorators to make Vuex modules a breeze

Installation

https://gist.github.com/1dac7efca0b334bd94b89fc35e275aca

Babel 6/7

  1. You need to install babel-plugin-transform-decorators

Typescript

  1. set experimentalDecorators to true
  2. For reduced code with decorators, set emitHelpers: true and importHelpers: true

Usage

The conventional old & boring way

Remember how vuex modules used to be made ?

https://gist.github.com/088b14974746fdc04801ccd5a9081349

Hello Decorators !

Well not anymore. Now you get better syntax. Inspired by vue-class-component

https://gist.github.com/0ae91192f75fa962642aecf05c30f035

async MutationAction === magic

Want to see something even better ?

https://gist.github.com/378ebfa813c772692cf5613ce0a24e68

Automatic getter detection

https://gist.github.com/582ac43cad84cb006b0a1c37af6541fb

this is turned into the equivalent

https://gist.github.com/f521a511f99404d7877305f0782e9b8c

Putting into the store

Use the modules just like you would earlier

https://gist.github.com/827b53a2a5ac151331e9e5efd2bc3189

Written with StackEdit.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment