Vuex-ORM을 통한 양방향 데이터 바인딩

Vuex-ORM을 통한 양방향 데이터 바인딩

Vuex ORM을 사용할 때 양방향 데이터 바인딩을 실현하기 위한 라이브러리 또는 이미 설명한 패턴을 알고 있는 사람이 있습니까?

Vuex에서 이 문제를 해결하기 위한 라이브러리를 몇 개 찾았습니다만, Vuex-ORM에 대한 구체적인 라이브러리는 아직 없습니다.

• vuex-map 필드
• vuex-pathify의

이를 위해 미리 정의된 플러그인은 없다고 생각합니다만, 계산 속성의 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
          }
        })
      }
    }
  }
}

KIA Ishi의 아이디어에 따라 vuex-orm 모델의 모든 필드에 대해 연산 속성을 생성하기 위해 호출하는 기능을 고안했습니다.유이드를 사용하기 때문에insertOrUpdate.

이 함수는 vuex-orm 모델에서 필드를 읽고 쓰는 Vue 구성 요소의 구성을 만듭니다.이 구성에는 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
  };

};

언급URL : https://stackoverflow.com/questions/57218760/two-way-data-binding-with-vuex-orm