Using a non-async action in Vuex

We can see the collections of tour lists in the UI, but not their tour packages. This section will extract the tour packages from a tour list using Vuex without Axios because we are not sending an HTTP request. No HTTP request means that we are going to use a non-asynchronous action. You will learn how to use Vuex and a non-async action efficiently. So let's start.

Update the types.js file in the store/tour folder with the following code:

export const GET_PACKAGES_OF_SELECTED_CITY = "GET_PACKAGES_OF_SELECTED_CITY";

The preceding code is a new action type we are adding in types.js.

Then, update actions.js in store/tour with the following code:

// non-asynchronous action
export function getPackagesOfSelectedCityAction({ commit }, payload) {
  commit(types.GET_PACKAGES_OF_SELECTED_CITY, payload);
}

You will notice in the preceding action that there are no try and catch blocks since we are not using Axios in here...