vuex-model-template
Generation of vuex module from object template.
Alpha version. More information coming soon.
Objective
Working with Vuex, I spent a lot of time writing and perfecting boilerplate code, logic surrounding calls for actions/mutations and managing side effects.
This is my attempt at simplifying the boilerplate generation while adding support for:
- enforcing expected properties
- type validation
- auto-generated actions accessible directly on the object's instance
- automatic side-effects management
- template based serialization & deserialization
Getting Started
Webpack Configuration
If you uglify your code, do not use the '-p' flag on the webpack executable. Also, make sure to use the mangle option shown below, otherwise it won't work as expected.
mangle: keep_fnames: true /* Prevents function names (class names) from being compressed */
Setup Code
;;Vue; ; const store = Vuex; VuexModelObject;
Usage
const FOO_MODEL = template: aAny: type: TYPEAny defaultValue: undefined aArray: type: TYPEArray defaultValue: items: type: TYPEString aBoolean: type: TYPEBoolean defaultValue: false aComplex: type: TYPEComplex // defaultValue: {} <-- this property is not used for Complex properties: aProp: type: TYPEString // etc. aNumber: type: TYPENumber defaultValue: 10 aObject: type: TYPEObject defaultValue: undefined aString: type: TYPEString defaultValue: 'defined' aSymbol: type: TYPESymbol defaultValue: undefined actions: { return thisactionsaNumber; } properties: ; { superdata FOO_MODEL; } // $initialize will be executed before $waitReady returns the instance return thisactions; let foo = ;foo$waitReady; // Custom serialization and deserialization of properties// For example: 'aChildObject' is a link to another object we wish to save as a string (id) and to expand as a full-fledged object whem running.template'aChildObject' = type: TYPEObject { return itemid; } { // This call can be synchronous or asynchronous return ChildObjectService; } // Set 'aChildObject'fooactionsaChildObject; let json = JSON;console; // 'abc'
Usage Example
Go check the Example Project