Removing a tour package using Axios and Vuex

In this section, we will implement functionality that deletes a tour package in the backend and deletes the tour package in the UI. So let's start.

Update services.js of the store/tour folder:

export async function deleteTourPackageAxios(id) {
  return await api.delete("TourPackages/" + id);
}

We are adding a new service that deletes a tour package.

Next, we update types.js of the store/tour folder:

export const REMOVE_TOUR_PACKAGE = "REMOVE_TOUR_PACKAGE";

In the preceding code, we are adding a new action type to remove a tour package.

Next, we update actions.js of the store/tour folder:

import { getTourListsAxios, deleteTourListAxios,
  postTourListAxios, deleteTourPackageAxios,
} from "@/store/tour/services";

We are importing deleteTourPackageAxios in the preceding code.

Let's add another action to actions.js:

export async function removeTourPackageAction...