基于Vuex-ORM的双向数据绑定

Question

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

我找到了几个库来帮助Vuex，但还没有专门针对Vuex-ORM的库：

• vuex字段
• vuex病理

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

按照石井起亚的想法，我想出了一个函数，用于为vuex-orm模型的所有字段生成计算属性，因为我使用uuid，所以我可以使用insertOrUpdate。

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

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

};