商店调度功能不接受我的参数

Question

美好的一天。我正在尝试使用 axios 进行快速搜索功能，并且每当我尝试将任何参数传递给它时它都会失败，但是当我硬编码执行 api 调用所需的值时它工作得很好，就像上面一样。

这是我的组件方法和变量：

<script>
export default {
  data: () => ({
    value1: null,
    value2: null,
    value3: null,

  }),

  methods: {
    myMethod(){
      this.$store.dispatch('storeFunction', {functionValue1: this.value1, functionValue2: this.value2, functionValue3: this.value3})
    }
  },
};
</script>

这是我的商店调度功能，这个不起作用并给我一个错误 500：

    storeFunction(functionValue1, functionValue2, functionValue3) {
      axios
        .post("/some/call", {        
          apiValue1: functionValue1,
          apiValue2: functionValue2,
          apiValue3: functionValue3
         }
           )
        .then(res => {
          console.log("call response", res)
        });
    },
  },

但是，如果我硬编码发布这篇文章所需的值，它就可以正常工作：

    storeFunction() {
      axios
        .post("/some/call", {        
          apiValue1: 'myValue1',
          apiValue2: 'myCalue2',
          apiValue3: 'myCalue3'
         }
           )
        .then(res => {
          console.log("call response", res)
        });
    },
  },

我到底做错了什么？

Answer 1

您正在以单个对象作为参数调度一个动作：

this.$store.dispatch('storeFunction', {functionValue1: this.value1, functionValue2: this.value2, functionValue3: this.value3})

但是你的函数接受三个单独的参数：

storeFunction(functionValue1, functionValue2, functionValue3)

解决方案应该只是解构函数中的参数，如下所示：

storeFunction({functionValue1, functionValue2, functionValue3})

或者，如果您无法使用此功能，您可以使用 ES5 方式：

storeFunction(values) {
  var functionValue1 = values.functionValue1
  var functionValue2 = values.functionValue2
  // etc...
}