javascript - Vue 发送参数值，声明要发送的参数

Question

我有一个在页面创建时调用的 vue 函数，名为 fetchReport

这工作得很好，而且我还有另外 2 个函数在更改选择元素时调用，它们也能工作，但这是我的问题:

目前，如果我调用handleTypeSelect或handleLocationSelect，它们都会提交正确的值，但每次都会在fetchReport调用中将其作为itemType提交。我假设这是因为他们只发送一个参数值，这是第一个参数。

如何修改此设置，以便 handleTypeSelect 将值作为 itemType 发送，而 handleLocationSelect 将值作为 locationID 发送>?

created() {
    this.fetchReport();
},
methods: {
  fetchReport(itemType = '3', locationID = '10', startDate = new Date().toISOString().substring(0,10), endDate = new Date().toISOString().substring(0,10)) {
      axios.get('/report/assets/data', {params:{itemType: itemType, startDate: startDate, endDate: endDate, locationID: locationID}})
      .then(response => {
        // handle success
        console.log(response.data)
        this.rows = response.data
      })
  },
  handleTypeSelect() {
      this.fetchReport(itemTypes.value);
  },
  handleLocationSelect() {
      this.fetchReport(itemLocations.value);
  }
}

Answer 1

重构fetchReport的参数:

不要采用一系列参数(arg1, arg2, arg3)，而是采用单个参数(arg)

此arg参数将是一个对象，其中包含您需要作为参数的所有属性。作为后续操作，在函数内移动默认值。

您的结果将是:

  fetchReport(myParams) {
      const defaults = { itemType: '3', locationID: '10', .... }; // list all other defaults, same as previous arguments
      const params = Object.assign(defaults, myParams);
      axios.get('/report/assets/data', { params })
      .then(response => {
        // handle success
        console.log(response.data)
        this.rows = response.data
      })
  },

然后，当需要调用fetchReport时:

fetchReport({ itemType: 'MyValue' })

fetchReport({ locationID: 'MyValue' })

当您不想考虑参数的顺序时，这是处理具有多个参数的函数的最佳实践方法