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

Posted 2023-02-22

【中文标题】VueJS + Vue.Draggable + Vuex Store + 计算变量

【英文标题】：VueJS + Vue.Draggable + Vuex Store + Computed Variables

【发布时间】：2020-03-14 01:32:13

【问题描述】：

有没有办法在 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）。此外，用户可以创建新的列表项/删除现有的列表项。 实现这一目标的最佳方法是什么？

提前谢谢你。

【问题讨论】：

计算属性应该是一个返回一些值的函数。

计算的属性确实返回一个值，还是我错了？应用程序加载后，列表项会正确显示。这是函数：return this.$store.getters.listItems.filter(item => item.list === 1)

【参考方案1】：

在一个复杂的可拖动用例中，同样使用 vuex，我最终创建了一个名为“changes”的状态变量，每次发生变化时，它都会增加（通过 vuex 突变）。链接到拖动的数据在数据中，而不是在商店中。我手动同步两者。

我使用它 - 通过一个观察者 - 用全新的数据触发我的基础组件的重新渲染。

这个解决方案很丑陋，在 vue3 中可能不需要。

【讨论】：

你能详细说明一下吗？我似乎有同样的问题

【参考方案2】：

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

将您的可拖动 div 放入一个新组件中

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

处理 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,
        
    );

最后在商店中创建 updateFramesOrder 操作以相应地更改列表。

希望对你有帮助！