与 Vuex-ORM 的双向数据绑定

Question

有人知道使用 Vuex ORM 时在表单中实现双向数据绑定的库或已经描述的模式吗？

我找到了几个库来帮助 Vuex 解决这个问题，但是 none 还专门针对 Vuex-ORM：

Answer 1

我不认为有任何预定义的插件可以做到这一点，但你应该能够在计算 [=15= 上使用 setter 和 getter 对典型的 Vuex 状态做同样的事情]...?

import User from '@/models/User'

export default {
  computed: {
    user: {
      get () {
        return User.find(1)
      },

      set (value) {
        User.update({
          where: 1,
          data: {
            name: value
          }
        })
      }
    }
  }
}

Answer 2

按照 Kia Ishii 的想法，我想出了一个函数，我调用它来为 vuex-orm 模型的所有字段生成计算属性。因为我用的是uuid，所以可以用insertOrUpdate.

此函数为 Vue 组件创建一个配置，该组件从 vuex-orm 模型读取和写入字段。该配置包含模型所有字段的计算属性，以允许与 v-model 属性进行双向数据绑定。它还包含一个带有 id 字段的 props 选项，因此组件需要与 router-view 相关联。

import {v4 as uuidv4} from 'uuid';

/**
 * @param {typeof import("@vuex-orm/core").Model} model
 * @returns {{props: Object, computed: Object}}
 * @this {VueComponent}
 */
export default model => {

  const fields = model.fields();
  const computed = {};
  for (const field in fields) {
    if (field !== 'id') {
      computed[field] = {
        get() {
          const item = model.find(this.$props.id);
          return item ? item[field] : fields[field].value;
        },
        set(value) {
          model.insertOrUpdate({
            data: {
              id: this.$props.id,
              [field]: value
            }
          });
        }
      };
    }
  }

  return {
    props: {
      id: {
        type: String,
        default: uuidv4
      }
    },
    computed
  };

};

与 Vuex-ORM 的双向数据绑定

Two way data binding with Vuex-ORM

2-way-object-databinding

vue.js

vuex

vuex-orm