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

Question

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

我已经试过了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>

感谢您提供有关如何使数据绑定（例如通过 v-model）起作用的任何建议。

Answer 1

如果将此添加到 User class 的 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 反应性不能开箱即用的原因是它们都有单独的实现，使用的机制略有不同。这是一个解释：https://medium.com/p/525ffe12ad81#c925

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

js-data.io as Vue.js store

javascript

vue.js

jsdata