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

Question

在使用Vuex ORM时，是否有人知道用于在表单中实现两种方式数据绑定的库或已经描述的模式？

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

• vuex 地图字段
• vuex-pathify

Answer 1

我不认为有任何预定义的插件可以做到这一点，但你应该能够使用计算属性上的 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 模型的所有字段生成计算属性。因为我使用 uuids，所以我可以使用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
  };

};