Uniapp Vue 提交数据到 API 并接收响应 Payload 示例

本示例演示了如何使用 Uniapp Vue 程序通过 payload 提交数据到 API 并接收响应数据。我们将使用一个简单的例子：将 '{'prompt':'烦烦烦','keys':'sk-c6e3c04b15af4afd933f4d15282ed524' }' 数据提交到 API，并接收 API 的响应结果。

提交数据的代码：

this.$store.dispatch('submitData', {
  prompt: '烦烦烦',
  keys: 'sk-c6e3c04b15af4afd933f4d15282ed524'
})

在 store 中定义 submitData 方法：

const actions = {
  async submitData({ commit }, payload) {
    try {
      const response = await uni.request({
        url: 'https://api.example.com/submit',
        method: 'POST',
        data: payload
      })
      commit('setResponse', response.data)
    } catch (error) {
      console.error(error)
    }
  }
}

在 mutations 中定义 setResponse 方法：

const mutations = {
  setResponse(state, response) {
    state.response = response
  }
}

最后，在组件中使用响应数据：

<template>
  <div>{{ response }}</div>
</template>

<script>
export default {
  computed: {
    response() {
      return this.$store.state.response
    }
  }
}
</script>

在上面的示例中，我们使用了 `uni.request` 发送 POST 请求到 API。payload 对象包含了 '{'prompt':'烦烦烦','keys':'sk-c6e3c04b15af4afd933f4d15282ed524' }' 数据，并在成功接收响应数据后将数据存储在 store 中，最终在组件中显示响应数据。

这只是一个简单的例子，你可以根据你的实际情况修改代码，例如修改 API 地址、请求方法、提交的数据等等。