javascript - Laravel + Vuex : Object/argument destructuring not working

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，但这不是解构的工作方式(它不会解压 key 和对象的值)。当前设置仅在您使用具有 prop 键和 value 键的对象调用它时才有效:

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