Vuex-ORM双向数据绑定不能监视嵌套对象

Question

此问题与Two way data binding with Vuex-ORM 相关

我尝试使用带有deep的watch来处理这样的用户表单。

<template>
  <div id="app">
    <div style="display: inline-grid">
      <label for="text-1">Text-1: </label>
      <input name="text-1" type="text" v-model="user.name" />

      <label for="text-2">Text-2: </label>
      <input name="text-2" type="text" v-model="user.lastName" />

      <label for="text-3">Text-3: </label>
      <input name="text-3" type="text" v-model="user.birth" />

      <label for="text-4">Text-4: </label>
      <input name="text-4" type="text" v-model="user.hobby" />
    </div>
    <div>
      <h5>Result</h5>
      {{ userFromStore }}
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "App",
  computed: {
    ...mapGetters({
      userFromStore: "getUserFromStore",
      messageFromStore: "getMessage",
    }),
    user: function () {
      return this.userFromStore ?? {}; // basically "User.find(this.userId)" inside store getters
    },
  },
  watch: {
    user: {
      handler(value) {
        console.log('called')
      //  this.updateUser(value);
      },
      deep: true,
    },
  },
  methods: {
    ...mapActions({
      fetchUser: "fetchUser",
    }),
    ...mapMutations({
      updateUser: "updateUser",
    }),
  },
  created() {
    this.fetchUser();
  },
};
</script>

问题是，无论我怎么尝试，我的观察者都没有在看。一旦数据来自Vuex-ORM，我的组件就无法在getters user上进行监视

有人知道为什么吗？

Answer 1

User.find(...)返回一个模型。该模型的属性不是反应性的，即您不能对未被跟踪的项执行双向数据绑定。因此你的观察者不会触发。

我的建议是将您的用户数据作为道具推送到可以编程处理数据的组件中。

或者，作为示例，您可以简单地手动处理双向绑定：

​

Vue.use(Vuex)

class User extends VuexORM.Model {
  static entity = 'users'

  static fields() {
    return {
      id: this.number(null),
      name: this.string(''),
      lastName: this.string(''),
      birth: this.string(''),
      hobby: this.string('')
    }
  }
}

const db = new VuexORM.Database()
db.register(User)

const store = new Vuex.Store({
  plugins: [VuexORM.install(db)]
})

User.insert({
  data: {
    id: 1,
    name: 'John',
    lastName: 'Doe',
    birth: '12/12/2012',
    hobby: 'This, that, the other'
  }
})

Vue.component('user-input', {
  props: {
    value: { type: String, required: true }
  },
  template: `<input type="text" :value="value" @input="$emit('input', $event.target.value)" placeholder="Enter text here...">`
})

new Vue({
  el: '#app',
  computed: {
    user() {
      return User.find(1)
    }
  },
  methods: {
    update(prop, value) {
      this.user.$update({
        [prop]: value
      })
    }
  }
})

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuex@3.6.2/dist/vuex.min.js"></script>
<script src="https://unpkg.com/@vuex-orm/core@0.36.4/dist/vuex-orm.global.prod.js"></script>

<div id="app">
  <div v-if="user" style="display: inline-grid">
    <label for="text-1">Name: </label>
    <user-input
      id="text-1"
      :value="user.name"
      @input="update('name', $event)"
    ></user-input>

    <label for="text-2">Last name: </label>
    <user-input
      id="text-2"
      :value="user.lastName"
      @input="update('lastName', $event)"
    ></user-input>

    <label for="text-3">D.O.B: </label>
    <user-input
      id="text-3"
      :value="user.birth"
      @input="update('birth', $event)"
    ></user-input>

    <label for="text-4">Hobby: </label>
    <user-input
      id="text-4"
      :value="user.hobby"
      @input="update('hobby', $event)"
    ></user-input>
  </div>
  <pre>User in store: {{ user }}</pre>
</div>

​