Question

有没有办法在Vuex商店中将Vue.Draggable列表与计算变量一起使用？我刚接触VueJS，这是我当前的组件设置：

   $.ajax({
      type: "POST",
      url: "<%= admin_one_time_link_clicks_expire_post_path(@one_time_link_clicks.first.one_time_link.id) %>",
      data: {otl_clicks: all},
      dataType: 'json',
      success: ()=>{
        console.log("asdasd")
      }
    })

没有计算变量，一切正常。使用计算变量时，我可以在列表之间拖动列表项，但是UI不会更新，因为它是从商店计算出来的。基本上，我需要基于输入文件（json）显示多个列表。这些列表具有可在不同列表之间拖动的列表项（使用Vue.Draggable）。此外，用户可以创建新列表项/删除现有列表项。实现此目标的最佳方法是什么？

谢谢。

Answer 1

在一个复杂的可拖动用例中，也使用vuex，我最终创建了一个状态为“ changes”的变量，每次更改时，变量都会增加（通过vuex突变）。

我通过观察者使用它来触发具有完全新鲜数据的基本组件的重新呈现。

Answer 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 操作以相应地更改列表。

希望有帮助！

VueJS + Vue.Draggable + Vuex存储+计算变量

2 个答案: