Skip to content

Instantly share code, notes, and snippets.

@calebroseland
Last active September 3, 2020 18:06
Show Gist options
  • Save calebroseland/2fa37abdb5560739b3b4b901382b0a90 to your computer and use it in GitHub Desktop.
Save calebroseland/2fa37abdb5560739b3b4b901382b0a90 to your computer and use it in GitHub Desktop.
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