Laravel + Vuex: разрушение объекта / аргумента не работает

Question

Я создаю приложение Vue с использованием Vuex, и я не могу заставить работать следующий код (отредактированный для краткости, вдохновленный этим сообщением в блоге).

// File: views/Board.vue

export default {
    methods: {
        updateProp (prop, value) {
            console.log(prop, value) // Outputs prop and value

            this.$store.commit('board/updateProp', {
                [prop]: value
            })
        }
    },

    // ...
}

И в моем (названном) модуле Vuex:

// File: vuex/modules/board.js

export default {
    mutations: {
        updateProp (state, { prop, value }) {
            console.log(prop, value) // Outputs 'undefined undefined'
        }
    },

    // ...
}

Так как import { something } from 'somewhere' работает нормально, я склонен верить объектам деструктурирования. Я просто сбит с толку, почему мой код не работает.

Я также создал .babelrc файл со следующим, и установлены соответствующие плагины и пресеты, но безрезультатно.

{
    "plugins": [
        "transform-es2015-destructuring",
        "transform-object-rest-spread"
    ],
    "presets": [
        ["es2015", { "modules": false }]
    ]
}

Помощь очень ценится.

Answer 1

Это, вероятно, не ответ, но слишком сложно вписать в комментарий. Я не уверен, почему оба prop а также value являются undefined, но это не так, как работает деструктуризация (она не распаковывает ключ и значение объекта). Текущая настройка будет работать, только если вы вызываете ее с объектом, который имеет prop ключ и value ключ:

this.$store.commit('board/updateProp', { prop, value })