VueJS：使用计算 "set/get" 与 Vue.Draggable 和 VueX

Question

我正在寻求有关 "Vue.Draggable" 的帮助。第二天，我正在尝试正确更新可拖动数组。

挑战是：

使用计算的 set/get 函数更新可拖动数组
获取可拖动项属性，包括有关父项的信息并调用 axios 函数更新 MySQL 上的数据。

数据样本：

{ cat1: { authors: [ { name: "Name 1" }, { name: "Name 2" } ] }, cat2: { authors: [ { name: "Name 3" }, { name: "Name 4" } ] } }

渲染代码：

<div v-for="(category, index) in categories">
    <draggable v-bind:id="index" v-model="category.authors" :options="{group:'authorslist', draggable:'.author'}" class="draggable-row" >
    <div v-for="author in category.authors" :key="author.id" class="author" >

我想做什么：

实际上，提到的建筑工程很好。但只是视觉上的。 VueX 给出了关于变异过程的错误。

[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] Do not mutate vuex store state outside mutation handlers." Error: [vuex] Do not mutate vuex store state outside mutation handlers.

用 :value 替换 v-model 有帮助，但在这种情况下，D&D 甚至在视觉上都不起作用。

我尝试了很多变体...其中之一是 - 为 "categories" 创建一个计算属性并使用 "get/set" 函数从中调用 actions->mutations。问题是 - categories->set 函数在我们更改 authors 数组结构时不起作用。

第二个问题是在 categories 之间拖放 author，这样我们就可以获取作者和类别 ID，以便在 Axios 查询中使用它。

我试图使用 @end 事件，但是（！）它仅适用于排序过程，但不适用于父元素（类别）之间的 D&D。

如有任何帮助，我将不胜感激！

Answer 1

为了避免直接改变存储状态，您应该使用计算值并使用存储操作。类似于：

<draggable :id="index" v-model="authors" :options="{group:'authorslist', draggable:'.author'}">

并且：

computed:{
 authors: {
        get() {
            return this.$store.state.authors
        },
        set(value) {
            this.$store.commit('updateAuthors', value)
        }
    }
}

VueJS：使用计算 "set/get" 与 Vue.Draggable 和 VueX

VueJS: use computed "set/get" with Vue.Draggable and VueX

javascript

vue.js

vuex

vuejs2

vue.draggable