Vuex-ORM 的两种数据绑定方式

Question

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

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

• vuex-map-fields
• vuex-pathify

Answer 1

我认为没有任何预定义的插件可以做到这一点，但你应该能够对典型的 Vuex 状态使用计算属性的 setter 和 getter 来做同样的事情......？

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 选项，因此该组件需要与路由器视图相关联。

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
  };

};