Laravel + Vuex: Objekt/Argument Destrukturierung funktioniert nicht

Question

Ich baue eine Vue-Anwendung mit Vuex, und ich kann nicht den folgenden Code zu arbeiten (kurz bearbeitet, inspiriert von 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 
      }) 
     } 
    }, 

    // ... 
} 

Und in meinem (benannt) Vuex Modul:

// File: vuex/modules/board.js 

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

    // ... 
} 

Da import { something } from 'somewhere' funktioniert gut, ich bin geneigt Objekt Destrukturierung zu glauben funktioniert. Ich bin nur verblüfft, warum mein Code nicht funktioniert.

Ich habe auch eine .babelrc Datei mit den folgenden erstellt und installiert die entsprechenden Plugins und Presets, aber ohne Erfolg.

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

Hilfe sehr geschätzt.

Answer 1

Dies ist wahrscheinlich nicht die Antwort, aber zu schwierig, um in einen Kommentar zu passen. Ich bin nicht sicher, warum sowohl prop und value sind undefined, aber das ist nicht, wie Destrukturierung funktioniert (es entpackt nicht den Schlüssel und Wert eines Objekts). Das aktuelle Setup würde nur funktionieren, wenn Sie es mit einem Objekt aufrufen, die einen prop Schlüssel und einen value Schlüssel hat:

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