Почему не работает деструктуризация?

Question

[ivankirshin]

Столкнулся с проблемой. Мне нужно поменять местами объекты, которые хранятся в массиве во vuex.

replacePuzzles({commit, getters},{first,second}){
        let puzzles = getters.getPuzzles 
        console.log(puzzles[first],puzzles[second])
        [puzzles[first],puzzles[second]] = [puzzles[second],puzzles[first]]

Выводится такая ошибка Cannot set property '#< Object >' of undefined.
Причем, в консоль объекты нормально выводятся. Странно, что если убрать вывод в консоль, то возникает уже другая ошибка: TypeError: Cannot read property '19' of undefined. (19 это значение переменной).
Ума не приложу в чем дело.
Проект тут. Проблемный файл

Answer 1

[AngReload]

У вас нет точек с запятой, а сам язык между закрывающей круглой скобкой и открывающей квадратной её не ставит. Ваш код аналогичен такому:

console.log()[puzzles[first],puzzles[second]] = [puzzles[second],puzzles[first]]

Надо так:

replacePuzzles({commit, getters},{first,second}){
        let puzzles = getters.getPuzzles 
        console.log(puzzles[first],puzzles[second])
        ;[puzzles[first],puzzles[second]] = [puzzles[second],puzzles[first]]

Answer 2

[Bhudh]

Выражение puzzles[first] возвращает результат, поэтому его нельзя использовать в присваивающих выражениях. Потому, кстати, и выводятся в консоль объекты.
А Вы потом этим объектам (а не свойствам!) пытаетесь присвоить друг друга.

Comments

[Антон Спирин]

https://jsfiddle.net/rockon404/pe53993s/

Вот так это выглядит после транспиляции в ES5:

"use strict";

var a = [1];
var b = [2];

var _ref = [b[0], a[0]];
a[0] = _ref[0];
b[0] = _ref[1];

alert([].concat(a, b));

[ivankirshin]

Если сделать window.puzzles=puzzles, то потом в браузере через консоль все отлично работает

[Bhudh]

Антон Спирин, посыпаю голову пеплом.
Тогда откуда проблема с undefined?

[Антон Спирин]

Bhudh, надо запускать и смотреть.
Судя по ошибке происходит что-то такое:
undefined['#< Object >'] = some;
и
some = undefined['19'];

ivankirshin, а почему ключ такой странный '#< Object >'? Вы уверены, что все приходит? Так как если верить второй ошибке, у вас происходит что-то вроде этого. Первую ошибку с этим примером на jsfiddle воспроизвести не могу. Скорей всего она происходит где-то в другом месте.

[ivankirshin]

Антон Спирин,
Вот так вызываю. Через консоль все проверял - приходит. Опыта у меня немного, видимо, где-то по глупости намудрил

static drop(e){
        this.classList.remove('under-drop-element')
        let obj = {
            first: parseInt(DragManager.dragElem.dataset.id),
            second: parseInt(this.dataset.id)
        }
        DragManager.store.dispatch('replacePuzzles', obj)
        console.log('drop')
    }

[Антон Спирин]

ivankirshin, а на какие строки ошибки указывают?

[ivankirshin]

Антон Спирин, Понял! Все дело в ;
Из-за этого и ругается. Но как тогда быть с линтом?

[Антон Спирин]

ivankirshin, ух ты. Очень интересно. Вот и подводные камни отказа от точек с запятой. Исключение поставьте:

let puzzles = getters.getPuzzles; // eslint-disable-line
[puzzles[first],puzzles[second]] = [puzzles[second],puzzles[first]]

По мне код красивей и читаемей с точками с запятой.

[ivankirshin]

Антон Спирин, Спасибо)