如何将 RESTful API 与 Vuex 和 Axios 一起用于 Dashboard

Question

我是 Vuex 和 REST API 的新手，但需要使用 Vuex 和 Axios 将仪表板连接到后端 REST API，但遇到了一些麻烦。

例如，我需要在我们的参与者数组中添加一个参与者，这是我们在 Vuex 商店中的状态之一。我在这里开始了一些操作，例如 'Load Participants' 连接到我们的后端并加载所有参与者数据。和 'Add participant' 应该添加一个参与者。

我对流程以及如何将实时信息从我们的仪表板连接到此感到困惑。在我们的仪表板上，我们有一个 'new participant' 表单，您可以在其中输入姓名、电子邮件、性别等。如何将提交的数据输入到我的新参与者对象中？

以下是操作的片段：

actions: {
async loadParticipants ({commit}) {
  try {
    await axios
      .get('/dash/participants')
      .then(r => r.data)
      .then(participants => {
        commit('setParticipants', participants)
      })
  }

  catch (e) {
    if (e.response)
      commit('Error?')

    throw e
  }
},


async getFilteredParticipants ({ state, commit, getters}) {
  try {
    const {data: participants} = await axios.get('dash/participants')
    commit('filterParticipants', participants, getters)
  }
  catch (e) {
    if (e.response)
      commit('Error?')

    throw e
  }

  }
},

async addParticipant ({ state, commit})
{
  //Need to get this data from New Participant modal?
  const participant = {
    name: 'Amy',
    email: 'amy@gmail.com',
    sex: 'female',
    tags: ['dog', 'cat'],
    createdBy: null,
    updatedBy: null,
    pendingEvalSentDate: Date,
    pendingEvalViewedEmailDate: Date,
    pendingEvalClickedLinkDate: Date,
    completedEvalHistorySummary: null
  }

  try {
    await axios
      .post('/dash/participants')
      commit('addParticipants', participant)
  }
  catch (e) {
    if (e.response)
      commit('Error?')

    throw e
  }
},

Answer 1

在您的模板中： <form action="" v-on:submit.prevent="submitParticipant">

然后，您必须在 "New Participant" 组件中创建一个提交方法，例如：

submitParticipant() {
   this.$store.dispatch('addParticipant', this.participant);
}

或：

submitParticipant() {
   this.$store.dispatch('participantModule/addParticipant', this.participant);
}

如果您的商店被分成模块并且 addParticipant 保留在 participantModule 中。

考虑到您将当前编辑的参与者保留在组件的数据中：

data() {
   return {
      participant: {} 
   }
}

那么您在商店中的 addParticipant 操作将如下所示：

addParticipant({ commit }, participant) {
   axios.post('/dash/participants', participant)
        .then(response => {
           console.log(response);
           commit('addParticipants', participant)
         })
        .catch(error => console.log(error));
}

如何将 RESTful API 与 Vuex 和 Axios 一起用于 Dashboard

How to use RESTful API with Vuex and Axios for Dashboard

rest

dashboard

vue.js

axios

vuex