Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
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`
// apply vue reactivity
for (let key in this) {
Vue.util.defineReactive(this, key, this[key])
// re-apply js-data schema
// 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:
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment