如何将RESTful API与Vuex和Axios一起用于仪表板

我对Vuex和REST API都是新手，但需要使用Vuex和Axios将仪表板连接到后端REST API，因此遇到了一些问题

例如，我需要将一个参与者添加到我们的参与者数组中，这是Vuex存储中的一个状态。我在这里开始了一些操作，比如“加载参与者”，它连接到我们的后端并加载所有参与者数据。和应添加参与者的“添加参与者”

我对流程以及如何将仪表板上的实时信息连接到该系统感到困惑。在我们的仪表板上，我们有一个“新参与者”表格，您可以在上面输入姓名、电子邮件、性别等。如何将输入到“我的新参与者”对象中的数据提交

以下是操作的一个片段：

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
  }
},

在模板中：

然后，您必须在新的参与者组件中创建提交方法，例如：

submitParticipant() {
   this.$store.dispatch('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));
}

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