javascript - js-data.io 作为 Vue.js 存储

Question

我想使用 js-data 3.0.1 作为我的 Vue.js 2.4.2 SPA 的商店。一切都很顺利，但不幸的是我无法使响应式(Reactive)数据绑定(bind)正常工作。

我已经试过了 vue-js-data , 好像坏了。

以下示例不起作用。如果我更改文本字段，文本将不会更新。但是，如果我用普通的旧 JS 对象替换 js-data 记录，它会像预期的那样工作。

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>

非常感谢您提供有关如何使数据绑定(bind)(例如通过 v-model)工作的任何建议。

Answer 1

如果将它添加到 User 类的 constructor 中，它应该适用于所有根级属性。有关完整示例，请参见此处: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)

Vue 和 Js-Data react 性不能开箱即用的原因是它们都有单独的实现，使用的机制略有不同。这是一个解释:https://medium.com/p/525ffe12ad81#c925