js-data.io as Vue.js store

Question

I'd like to use js-data 3.0.1 as store for my Vue.js 2.4.2 SPA. Everything works like a charm, but unfortunately I can't make the reactive data bindings work.

I've already tried vue-js-data, which seems to be broken.

The following example doesn't work. If I change the text fields, the text will not be updated. However if I replace the js-data record with a plain old JS object, it works like expected.

user.vue:

<template>
  <div>
    <input name="name" v-model="user.name" />
    <br />
    Name: {{user.name}}
  </div>
</template>

<script>
   export default {
     data() {
       return {
         user: this.store.createRecord('user')
       }
     }
   }
</script>

I'm thankful for any advice how to make the data binding (via v-model for example) work.

Answer 1

If you add this to the constructor of your User class, it should work for all root level properties. See here for a complete example: https://gist.github.com/calebroseland/2fa37abdb5560739b3b4b901382b0a90

  // 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)

The reason Vue and Js-Data reactivity don't work together out-of-the-box is that they both have separate implementations that use slightly different mechanisms. Here's an explanation: https://medium.com/p/525ffe12ad81#c925