Adding a tour list using Axios and Vuex

The Create or Add functionality would be the third easiest thing to implement in CRUD. Fetching and deleting functionalities is easy because they don't require a form component and some input fields. To create a functionality that adds or makes new data, we have to build a form.

Before building a form for the UI, we will first develop functionality in Axios and Vuex that creates a tour list.

To start, let's update services.js in store/tour by adding the following code:

export async function postTourListAxios(tourList) {
  return await api.post("TourLists", tourList);
}

The preceding code is a service that sends a POST request to the backend to create a tourList data entry.

Now, let's update types.js of the store/tour directory.

export const ADD_TOUR_LIST = "ADD_TOUR_LIST";

We are adding a new action type in the preceding code. The latest action type is for adding new tourList.

...