vuex에서 편집 가능한 복잡한 개체(네스트됨)를 적절하게 처리하는 방법

vuex에서 편집 가능한 복잡한 개체(네스트됨)를 적절하게 처리하는 방법

Vuex는 복잡한 데이터를 표시하고 복잡한 돌연변이를 하는 것은 매우 좋지만(스토어 전체에 영향을 미치는 트리에 노드를 추가하는 등) 복잡한 객체에 대한 "단순한" 돌연변이를 처리하는 것은 매우 귀찮은 일입니다.

제가 직면한 한 가지 사용 사례는 (매우) 단순합니다.내스트된 속성 및 어레이가 있는 목록 개체를 표시하는 컴포넌트가 있습니다.각 속성은 편집할 수 있습니다.각 개체는 하위 구성 요소와 함께 표시됩니다(리프 속성에 v-model을 사용해야 함).

다른 사용 사례는 구성 요소의 메서드를 사용하여 여는 모달 대화 상자입니다. 이 대화 상자에서 개체의 일부 속성/네스트 속성을 편집할 수 있습니다(리프 속성에 v-model을 사용해야 함).

현재 제가 하고 있는 일은 다음과 같습니다.개체를 표시하거나 편집하는 컴포넌트에 컴포넌트의data편집할 수 있는 오브젝트(모든 중첩 속성이 존재하지만 모든 리프가 로 설정된 오브젝트)의 "개체"null그런 다음 모달(modal)이 열리거나 컴포넌트가 객체를 표시/편집할 필요가 있는 경우 오브젝트를 (재귀 함수를 사용하여) 상세하게 복사하기만 하면 됩니다.data첫 번째, 데이터 첫 번째를 보고deep할 수 있는 선택권true및 각 변경에 대해 커밋합니다.

이것은 약간 잘못된 느낌이며, 작동하려면 상당한 노력이 필요합니다.

변환 트레이서빌리티 시스템이 마음에 들어 네스트된 속성에서 변경이 이루어질 때마다 개체 전체를 커밋하고 싶습니다.그렇게 많은 코드를 작성하지 않아도 된다면 정말 좋을 것 같습니다(심플한 글로벌 Vue Component 스토어에 vuex를 포기하는 것은 가치가 없을까...)간단한 코드와 좋은 돌연변이 시스템을 교환할 수 있습니다.

그럼 '표준' 방법이나 '권장' 방법이 있을까요?아니면 단순히 그런 노력을 필요로 하지 않고 그것을 할 수 있는 "똑똑한" 방법인가?

스토어 상태의 예:

state = {
  foo : [
    bar : {
      users : [
        {
          name : '',
          adddr : '',
          needs : ['a', 'b', 'c'],
          baz : [
            {
              k1 : v1,
              k2 : v2,
              k3 : [1,2,3,4,5],
            },
            //...
          ]
        },
        //...
      ]
    }
  ]
}

...그리고 모든 사용자를 커밋하고 싶습니다.

다음과 같은 방법으로 사용할 것을 권장합니다.

1. 구성 요소에는 업데이트할 속성의 전체 경로가 포함되어 있습니다(이 경로가 실행됩니다).
2. vuex에서는 lodash 또는 다른 유사한 도구를 사용하여 전체 경로를 사용하여 속성을 설정합니다.

요소

<template>
        <input v-on:change="update(‘object.nested.more.nested.attribute’, $event)" v-text:value="object.nested.mote.nested.attribute"></span>
</template>


<script>
 export default  {
  methods: {
    update: function (property, value) {
      this.$store.dispatch(UPDATE_COMPLEX_OBJECT, {property, value})
    }
  }
}
</script>

VUEX

import _ from 'lodash'

export default {
  namespaced: true,
  state: {
   myObject: {}
  },
  mutations: {
    [UPDATE_COMPLEX_OBJECT] (state, data) {
      _.set(state.myObject, data.property, data.value)
    }
  },
  actions: {
    [UPDATE_COMPLEX_OBJECT]: ({commit}, data) => {
      commit(UPDATE_COMPLEX_OBJECT, data)
    }
  }

}

뭔가 명확하지 않은 점이 있으면 알려주시고 이것이 도움이 되길 바랍니다.감사합니다!

음... 이 문제가 저를 너무 열 받게 해서 이 복잡한 사건들을 처리할 수 있는 모듈을 썼어요.https://github.com/hl037/vue-data-proxy 에서 찾을 수 있습니다.

그런 다음 다음과 같은 구성 요소를 간단히 작성할 수 있습니다.

import vueDataProxy from "vue-data-proxy";

export default {
  props : {
    user_ind;
  }
  computed : {
    ...vueDataProxy({
      user : {
        fetch() {
          return this.$store.state.foo.bar.users[this.user_ind];
        },
        commit(val){
          // here, val is the full object (if reactivity injected)
          // returned by fetch
          this.$store.commit('updateUser', {ind : this.user_ind, val}
        }
     }
  },
  //...
}

가 있다고 하면...변이고updateUser(state, {ind, val}) { /*...*/ }

...그 후, 각 수정에 대해 어느 정도의 깊이에서도 커밋합니다.

다음과 같은 복잡한 중첩 개체가 있다고 가정합니다.

{
  super: {
    nested: {
      object: {
        to: {
          be: {
            updated: 'foo'
          }
        }
      }
    }
  }
}

여기서 특정 키를 업데이트하는 작업을 수행할 수 있습니다.

import * as types        from '../mutation-types'
import * as defaultStore from '../defaultStore'

export default {

  namespaced: true,

  state: defaultStore.complexObject,

  getters: {
    getSettings: state => state
  },

  mutations: {
    [types.UPDATE_SUPER_NESTED_OBJECT] (state, payload) {
      state.super.nested.object.to.be.updated = payload
    }
  },

  actions: {
    updateSuperNestedObject (store, payload) {
      return store.commit(types.UPDATE_SUPER_NESTED_OBJECT, payload)
    }
  }

}

컴포넌트:

import { mapActions } from 'vuex'

export default {

 computed: {
   ...mapActions('<modulename>', ['updateSuperNestedObject'])
 }

 methods: {
   handleUpdate(payload) {
     return this.updateSuperNestedObject('bar')
   }
 }

}

도움이 됐으면 좋겠다!

언급URL : https://stackoverflow.com/questions/51672475/how-to-properly-deal-with-editable-complex-object-nested-with-vuex