Setting up state management using Vuex

Vuex is the official state management library for Vue.js that is widely used for managing complex components. Vuex has a reactive global store and is reasonably easy to set up. I will explain the parts of the Vuex implementation as we write the code.

But before we start building our store, let's remove the authorization from the API controller so that we don't need an auth token when sending requests to the api/v1.o/ endpoints.

To do that, go to the ApiController.cs file in the namespace Travel.WebApi.Controllers.v1 of the Travel.WebApi project and comment the Authorize attribute like so:

// [Authorize]

After commenting the Authorize attribute, we can now use api/v1.0/ temporarily.

Let's start by setting up the update part of the Vuex.

Step 1 – Writing a store

Create a folder named tour inside the store folder. It will be like this: src | store | tour.

Step 2 – Writing a module

Create a JavaScript...