Vue.js 使用 Payload 提交数据及接收响应完整指南

在 Vue.js 应用中，我们经常需要向服务器提交数据。使用 Payload 可以清晰地组织和传递数据。本文将提供一个完整的指南，演示如何在 Vue.js 中使用 Payload 提交数据并接收响应。

1. 提交数据

在组件中，我们使用 Vuex 的 dispatch 方法触发一个 action，并将包含数据的 Payload 对象作为参数传递：

// 提交数据
this.$store.dispatch('submitData', {
  'prompt': '烦烦烦', 
  'keys': 'sk-c6e3c04b15af4afd933f4d15282ed524'
})

2. 处理提交数据的 Action

在 store.js 中，我们定义一个名为 submitData 的 action 来处理数据提交。这个 action 使用 Axios 发送 POST 请求到 '/api/submit' 路径，并将 Payload 对象作为请求体发送。

// store.js 中的 action
actions: {
  submitData({ commit }, payload) {
    axios.post('/api/submit', payload)
      .then(response => {
        // 提交 mutation 更新 store 状态
        commit('setResponse', response.data)
      })
      .catch(error => {
        console.log(error)
      })
  }
}

3. 更新 Store 状态的 Mutation

成功提交数据后，我们需要更新应用的状态。这里我们定义一个名为 setResponse 的 mutation，它接收服务器返回的数据并将其存储在 state.response 中。

// store.js 中的 mutation
mutations: {
  setResponse(state, response) {
    state.response = response
  }
}

4. 在组件中获取响应数据

最后，我们可以在组件中使用计算属性访问存储在 Vuex store 中的响应数据：

// 组件中获取响应数据
computed: {
  response() {
    return this.$store.state.response
  }
}

通过以上步骤，我们成功地使用 Payload 在 Vue.js 应用中提交了数据并接收了服务器响应。这种方式使得数据流清晰易懂，便于维护和扩展。