[Vuejs]-Is it possible to submit data to separate tables using the same form?

by

0👍

From the description of the problem, it seems you want send one single action to vuex in order to update two different tables on your back-end, and want the changes to be updated to user at the same time.

If that’s the case, you can achieve that with an action which POST to your API to both tables, and perform two successive commit after API calls are completed:

export default new Vuex.Store({
  state: {
    tasks: [...],
    engagements: [...],
  },
  mutations: {
    updateTask: (state, { taskId, userId }) => {
      // update state.tasks[taskId] however you want here
    },
    updateEngagement: (state, { userId }) => {
      // update state.engagements[userId] however you want here
    },
  },
  actions: {
    async updateTask({ commit }, { taskId, userId }) {
      const prefix = 'http://localhost/';
      try {
        // make API calls here
        const update1 = await axios.post(`${prefix}tasks/complete`, { taskId, userId });
        const update2 = await axios.post(`${prefix}/engagements/update`, { userId });

        // changes made by both commits will appear to user at the same time
        // since commit() is synchronous
        commit('updateTask', { taskId, userId });
        commit('updateEngagement', { userId });
      } catch (e) {
        console.log(`error occurred: ${JSON.stringify(e)}`);
      }
    },
  },
});

Leave a comment