VueJS + Vue.Draggable + Vuex Store +计算变量

Question

有没有办法在Vuex Store中使用带有计算变量的Vue.Draggable列表？我是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.Draggable)。此外，用户还可以创建新列表项/删除现有列表项。实现这一目标的最好方法是什么？

提前谢谢你。

Answer 1

在一个复杂的可拖动用例中，也使用了vuex，我最终在状态下创建了一个名为“changes”的变量，每次有变化时，它都会递增(通过vuex突变)。链接到拖动的数据在数据中，而不是在存储中。我手动同步这两个。

我使用它--通过一个观察器--用全新的数据触发我的基本组件的重现。

这个解决方案很难看，在vue3中可能不是必需的。

Answer 2

您可能需要执行以下操作：

1. 将您的可拖动div拖入新的组件

中

在这个新组件上，使用@change.self="handleDragAndDrop($event)"

1. 处理D&D

事件handleDragAndDrop：

(event){ const eventType = Object.keys(event)；const chosenFrame = eventeventType.element；store.dispatch( "updateFramesOrder"，{ event: event，listItemId: this.$props.itemId，} )；}

最后，在存储中创建更改列表accordingly.的

1. 操作

希望它能帮上忙！