import Vue from 'vue' | |
import {DataStore, Record} from 'js-data' | |
// define a base class that enables property-level vue reactivity. | |
export class VueReactiveRecord extends Record { | |
constructor (...args) { | |
// among other things, this will apply js-data schema if configured to do so; be sure to do `track: true` | |
super(...args) | |
// apply vue reactivity | |
for (let key in this) { | |
Vue.util.defineReactive(this, key, this[key]) | |
} | |
// re-apply js-data schema | |
this._mapper().schema.apply(this) | |
} | |
} | |
// create a record class which inherits this | |
export class User extends VueReactiveRecord {} | |
export const store = new DataStore() | |
// finally, create a mapper (if going this route) | |
export const userMapper = store.defineMapper('user', { | |
idAttribute: 'id', | |
endpoint: 'users', | |
recordClass: User, | |
schema: { | |
track: true, | |
properties: { | |
id: { type: 'number' /* , or maybe... type: 'string', format: 'uuid' */ }, | |
name: { type: 'string' } | |
} | |
} | |
}) | |
// now users will be reactive in Vue. for a detailed explaination, see here: https://medium.com/p/525ffe12ad81#c925 | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment