Vue.js如何通过Action向Store传递数据对象并访问？

嘿，我来帮你搞定这个Vuex Action传参的问题！你现在的问题出在Action的参数使用和访问方式上，咱们一步步来修正：

首先，你组件里的写法其实是没问题的——@click="addToCart(row)" 正确传递了row对象，...mapActions(["addToCart"]) 也正确映射了Action。问题出在你的Vuex Store里的Action定义上。

错误原因 #

在Vuex的Action中，第一个参数是context上下文对象（包含commit、dispatch等方法），第二个参数才是你从组件传递过来的payload（也就是这里的row）。你之前的代码虽然把row作为第二个参数写了，但在console.log里用了this.row，这完全不对：

• Vuex Action里的this并不指向你的组件实例，所以this.row肯定是undefined
• 你传递的row已经作为参数传入了Action，直接用这个参数就行！

正确的Store Action写法 #

把你的Action改成这样：

addToCart({ commit }, row) {
  console.log("rooooooohhhhhoooow", row); // 直接用传入的row参数
  commit('mAddToCart', row); // 正常提交mutation
}

额外确认点 #

确保你已经正确从Vuex导入了mapActions：

import { mapActions } from 'vuex';

export default {
  // ...其他组件代码
  methods: {
    ...mapActions(["addToCart"])
  }
}

这样修改后，你就能在Action里正常访问到传递过来的row对象啦！

内容的提问来源于stack exchange，提问作者margherita pizza