The Schemax plugin for Vue facilitates data creation, validation, data binding, processing, serialization, and UI generation. This helps connect data to components, the Vuex state, and the server.
Our schema model is based on top of the official JSON Schema specification, with additional properties for specifying data sub-types, state paths, and UI hints.
A common workflow makes the schema the single point of truth. The state is then generated from the schema using provided tooling.
A state object can give us hints about the type of each property when a property’s value is a string, number, or boolean. It also gives us a vague idea when assigning an object or array. No information is provided when the value is null or undefined.
{
aString:’abc’,
aBoolean:true,
aNumber:12,
anArray:[1,2,3],
anObject:{a:1},
something:null,
somethingElse:undefined
}To describe this state, we create a schema.
{
type:’object’,
properties:{
aString:{
type:’string’,
default:’aString’
}
}
}We can now generate our state module from the schema.
> node createStateFile('./MyState.schema.js')This will create the file MyState.js exporting the state object and a createState() method.
The schema can be used to check field inputs in a client form, enforce state updates, or for checking data at the server.
This represents the simple name of the . The default value is the to-caption representation of the object's property name.
This represents the dot-path into the store. The default value is the dot-path of the parent tree prepended to the object's property name.
Each basic type (string, boolean, number, object, array, and null) can have subtypes. The first subtype is called type1, the second type2, etc. For example, an string has subtypes that include username, password, html, and multiline.
Additional hints used to create the correct UI widget.
The order to present the properties in an editor.
Excluded items. Items an editor should not display, such as generated ids and binary fields.
A state factory is useful for initializing and restoring the state to a default value. A fresh default value can also be used to detect changes.
strings boolean objects arrays numbers
caption subtypes (type1, type2, type3) anyOf oneOf allOf hints exclude
null values become objects with default of null. All object properties are added to the required array.
Calculate items in the schema that are not mapped in the state.
Calculate items in the state that are not mapped in the schema.