【问题标题】：Cannot make POST request (with data) with event trigger from outside component无法使用来自外部组件的事件触发器发出 POST 请求（带有数据）
【发布时间】：2021-11-23 07:47:49
【问题描述】：

我正在尝试使用来自一个组件的点击事件来触发另一个组件中的方法，到目前为止效果很好......除了应该在我的 POST 请求中传递的数据没有被发送。

但是，当我通过在持有 API 调用方法的组件中调用它来测试它时，它工作正常。

想法？

从 Dashboard .vue 传递的数据 -

// Data to be loaded into s3 bucket
this.s3Data.push([`Longitude: ${this.lng}, Latitude: ${this.lat}, Uncertainty Radius: ${this.uncertainty_radius} meters, Address: ${this.place_name}, Source: TEXT`])
this.s3Data = JSON.parse(JSON.stringify(this.s3Data))

要从 Dashboard.vue 调用的方法 -

uploadToS3() {
  axios.post("http://localhost:8080/api/v1/targetLocation/uploadLocationsToS3Bucket", this.s3Data,
      {headers: {'Content-Type': 'application/json'}})
},

来自 Applayout.vue 的方法触发事件 -

HTML

<v-btn @click="uploadDataToS3" outlined dark data-test="end-tracking-button">End Tracking</v-btn>

import Dashboard from "@/pages/Dashboard/desktop/Dashboard.vue";

uploadDataToS3() {
  Dashboard.methods.uploadToS3()
},

【问题讨论】：

您可以使用 eventBus 从 Applayout 发出一个事件，然后从 Dashboard.vue 中捕获它，然后触发处理程序
@Amaarrockz 触发 API 调用的事件总线？我不需要传递数据，所以我可以用它来简单地触发它？
如果有任何数据你需要从这里传递到那里，那么就去吧，否则没有必要

标签： javascript api vue.js axios

【解决方案1】：

您正在尝试的流程应该有效。我怀疑你没有发布的部分有一些错误。但这不是通常的做法。

简单的方法

如果组件之间存在父子关系 (Dashboard -> Applayout)，通常的通信方式是在子组件中发出事件：

this.$emit('custom-event-name', { eventData:  'if needed' })

并在父级中处理事件：

<Dashboard @custom-event-name="uploadDataToS3" />

通过这种方式，您不会将组件硬耦合在一起，这意味着您最终可以在父子关系之间插入其他组件，并且您“只”需要在父子关系中传递更高的事件。作为额外的奖励，在 Vue 开发工具扩展中更容易检查事件。

优雅的方式

但更优雅的方法是使用 Vuex，如果组件是兄弟组件并且您需要在它们之间传递数据，我强烈建议使用 Vuex。一开始它有点难，但维护起来要容易得多，你会感谢自己以后选择这条路径来解耦外部 API 调用并让它们更容易在其他组件上重用。

你需要一个看起来像这样的商店：

import Vuex from 'vuex'
import axios from 'axios'

const store = new Vuex.Store({
  state: {
    neededData: '', 
    resultData: 0
  },
  mutations: {
    setNeededData (state, payload) {
      state.neededData = `Longitude: ${payload.lng}, Latitude: ${payload.lat}, Uncertainty Radius: ${payload.uncertainty_radius} meters, Address: ${payload.place_name}, Source: TEXT\n`
    },
    setresultData (state, payload) {
      state.someData = payload
    }
  },
  actions: {
    async uploadDataToS3 (context, data) {
      const result = await axios.post(
        "http://localhost:8080/api/v1/targetLocation/uploadLocationsToS3Bucket",
        context.state.neededData,
        {headers: {'Content-Type': 'application/json'}}
      )
      context.commit('setResultData ', result.data)
    }
  }
})
export default store

然后将数据从Dasboard 更新到商店。您可以在与之交互的任何元素上执行此操作，以获取 API 调用中所需的数据。

<template>
  <input type="text" v-model="dashboardData.lat" />
  <input type="text" v-model="dashboardData.lng" />
  <button type="button" @click="setData" />
</template>
<script>
  export default {
    data () {
      return {
        dashboardData: {
          lat: '',
          lng: ''
        }
      }
    },
    methods: {
      setData () {
        this.$store.commit('setNeededData', this.dashboardData)
      }
    }
  }
</script>

然后在Applayout 组件中你会这样做：

  <button @click="$store.dispatch('uploadDataToS3', neededData)" />

回到原点，您将在Dashboard 组件中获得结果数据，如下所示：

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['someData'])
  }
}
</script>

或者只是

this.$store.state.someData

但我更喜欢以前的版本，因为您可以通过查看计算属性一目了然地看到您从商店中提取的数据。

【讨论】：

这似乎可行，除了它需要是 Applayout->Dashboard 并且仪表板已经有数据。我只需要使用 Applayout 来触发 Dashboard 中的方法（这已经在当前设置中发生，但是数据没有添加到 POST。我唯一可以使用数据的方法是如果我从仪表板，我不想这样做）
我可以将数据传递给 Applayout 并以这种方式发布，是的
@HelpTheNoob 你如何获得UploadDataToS3 中使用的Dashboard 组件？您是否有机会重新导入没有数据的组件并在其上运行该功能？获取组件引用的方法是设置引用属性<Dashboard ref="dashboardRefName" />，然后通过访问this.$refs.dashboardRefName.uploadToS3() 在方法中使用它。但是你真的应该考虑使用商店。它很快就会变得有用。
我已经添加了导入语句以及数据的来源。这应该为您澄清事情
尝试使用refs，如果您像这样访问组件，我怀疑您不会获得相同的组件实例。

【解决方案2】：

在我看来，最好的解决方案是使用mixins。

您将能够从任何组件调用此方法和其他方法，而无需在组件之间使用props 或bus 进行通信。

进一步说明：

如果你想连接一个 api，函数不需要在组件上。

如果它是一个由不同组件调用的函数。在我看来，最好的解决方案是在一个 mixins 文件中创建它，然后从每个需要它的组件中调用它。

【讨论】：

在一个组件中从另一个组件发出事件？怎么样？
如果他想连接到一个api，它也不需要在另一个组件上。它是一个由不同组件调用的函数。在我看来，最好的解决方案是在一个 mixins 文件中创建它，然后从每个需要它的组件中调用它。