vue.js - 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 中可能不需要。