Laravel + Vuex：对象/参数解构不起作用

Question

我正在使用 Vuex 构建一个 Vue 应用程序，但我无法使以下代码工作（为简洁起见编辑，灵感来自 this blog post）。

// 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 })