VueJS: использовать вычисленные "set/get" с Vue.Draggable и VueX

Question

Я ищу помощь с "Vue.Draggable". Второй день я пытаюсь корректно обновить 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.

Замена v-model с :value помогает, но в этом случае D&D не работает даже визуально.

Я перепробовал много вариантов... Один из них - создать вычисляемое свойство для "категорий" и использовать функции "get/set" для вызова actions->mutations от них. Проблема в - categories->set функция не работает, когда мы меняемся authors структура массива.

Вторая проблема - перетаскивание author между categories таким образом, это позволяет нам получить идентификатор автора и категории, чтобы использовать его в 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)
        }
    }
}