Laravel + Vuex：Object/argument 解构不起作用

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

Laravel + Vuex：Object/argument 解构不起作用

Laravel + Vuex: Object/argument destructuring not working

javascript

ecmascript-6

babeljs

vuex

laravel-mix