API requests with Vuex and Axios
When we are developing an application for web or mobile that you may want to consume and display data from API. There are multiple ways to do that but popularly it is using Axios.
Axios is a promise-based HTTP client for the browser and node.js. We use it because it is very useful and has basic usage for developers.
In Vue.js we use it for our API requests and it is better to using Axios with Vuex. Vuex helps us deal with shared state management with the cost of more concepts and boilerplate. It’s a trade-off between short term and long term productivity.
If you are new to developing or Vue.js you can look to documentations of these technologies Vue.js and Axios.
What is Vuex?
Vuex is a state management pattern + library for Vue.js applications. “It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated predictably “ as mentioned on the official website.
- The state, the source of truth that drives our app.
- The view, a declarative mapping of the state.
- The actions, the possible ways the state could change in reaction to user inputs from the view.
In this case, we’ll make a call to the API endpoint. Our API is https://rickandmortyapi.com/api/character. We will take Rick and Morty characters from the API then our request’s output will be shown on our custom component.
First of all, we should create a new application with Vue CLI with this command
vue create rick-appInstall Axios.
npm install axiosthen we should initialize Vuex on CLI or you can add Vuex with npm command. When a project is created it will come from a default store folder and files. I will customize this store for our project like down below.
As you see on top I have imported our required packages Axios and Vuex and our main state “ character ” is created. When making API requests this state will be filled with data. In actions, we created a new action named “ loadCharacter ” this field is the core of our project. Because API requests are made in here with GET method and then we responded to our data. When the request successfully has done “ SET_CHARACTERS ” will be committed. And our data can be reachable from all project scopes.
We have been created our character component and we reached our data with “ mapState ” our component will work properly. mapState is helping us to use our declared states in Vuex store.
On our main page, I have declared a function. This function will trigger the “ loadCharacters ” action as we declared on the store when our app is created and components will be shown on our page. In this app, we have used Axios technologies to make requests to API and it was very simple of course it can be complicated when started to work on a big project. But the main idea is simple and clean as you read.
Projects GitHub Repo: https://github.com/ergloguz/rick-morty-app
If you want to see a live demo of this project you can use the link below:
“ I HOPE IT HELPS YOU. HAPPY HACKING :) ”
