VueJS + Vue.끌 수 있는 + Vuex 스토어 + 계산된 변수

VueJS + Vue.끌 수 있는 + Vuex 스토어 + 계산된 변수

Vue를 사용할 방법이 있는가?Vuex Store에서 계산된 변수가 있는 끌 수 있는 목록?VueJS는 처음 접하는 제품이며 현재 구성 요소 설정:

// Template
<draggable class="list-group" :list="list1" group="people">
  <div
    class="list-group-item"
    v-for="(element, index) in list1"
    :key="element.id"
  >{{ element.name }} ({{ element.list }}) ({{ index }})</div>
</draggable>

// Script
computed: {
  list1: {
    return this.$store.getters.listItems.filter(item => item.list === 1)
  }
}

// Store
const getters = {
  listItems: (state) => {
    return state.items
  }
}

계산된 변수가 없으면 모든 것이 잘 작동한다.계산 변수를 사용할 때 목록 항목을 목록 간에 끌 수 있지만 UI는 스토어에서 계산되므로 업데이트되지 않는다.기본적으로 내게 필요한 것은 입력 파일(json)을 기준으로 여러 목록을 표시하는 것이다.이 목록에는 서로 다른 목록 간에 끌 수 있는 목록 항목이 있다(Vue 사용).끌 수 있음.또한 사용자는 새로운 목록 항목을 만들거나 기존 목록 항목을 삭제할 수 있다.이것을 이루기 위한 가장 좋은 방법은 무엇인가?

미리 고맙다.

복잡한 끌 수 있는 사용 사례에서, 또한 vuex를 사용하면서, 나는 결국 '변화'라는 상태의 변수를 만들게 되었고, 무언가가 변할 때마다 (vuex 돌연변이를 통해) 증가하게 된다.끌기에 연결된 데이터는 저장소가 아니라 데이터에 있다.나는 그 둘을 수동으로 동기화한다.

나는 이것을 감시자를 통해 완전히 새로운 데이터로 내 기본 구성요소의 렌더링을 촉발하기 위해 이것을 사용한다.

이 해결책은 추악하고, vue3에서는 필요 없을 것 같다.

다음과 같은 작업을 수행해야 할 수 있음:

1. 끌 수 있는 디브를 새 구성 요소에 연결하십시오.

2. 이 새 구성 요소에 대해@change.self="handleDragAndDrop($event)"

3. D&D 처리

handleDragAndDrop: function (event){
    const eventType = Object.keys(event)[0];
    const chosenFrame = event[eventType].element;
    
    store.dispatch(
        "updateFramesOrder",
        {
            event: event,
            listItemId: this.$props.itemId,
        }
    );
}

4. 마지막으로 스토어에서updateFramesOrder그에 따라 목록을 변경하는 작업.

도움이 되길 바래!

참조URL: https://stackoverflow.com/questions/58918652/vuejs-vue-draggable-vuex-store-computed-variables