How To Integrate Vue into a Rails app — Part 2
This is Part 2 of the Rails and Vue combination, which deals with how we can interact with Vue with the Rails API App. If you want to read part 1, Please feel to read to this link before proceeding.
What we are going to do here !!
So Far, we have completed the login and logout, we are mainly trying to deal with the todo data which is fetched from the Rails API app and trying to create a new one and make an existing one as completed. I will add those.
- Create an option to fetch the todos
- Option to create a new todo
- Option to complete the todo
To do this needs to split the work into small chunks.
1. Create an option to fetch the todos
So Far, we have some dummy todos are there in the Rails API, what we need to do is to create a mechanism to call the Rails API and take those values and display those inside the Vue App. We are not directly taking those todos, instead, we take those values and save those to the central store called Vuex Store which can be accessed using the getters, actions, and mutations.
Vuex is helpful for accessing the state for multiple components, but we don’t have a scenario there, but for the learning purpose, we can proceed to use Vuex. If you don’t know Vuex, visit this link and watch the video, it is a great thing to understand visually by Adam Jhar.
a. Link the Rails API to the Vue app
We already did the groundwork for linking the Rails API to the Vue app in part1, so we don’t need to repeat that, we need only to register the Rails GET API to the apiHelper.js
To do that, we need to add axios call with a GET request to the Rails API.
async todos () {
const response = await axios.get('todos')
return response.data
}will return the response from the API and which can be used in our Vue app.
b. Save the data to the Vuex module
In Part1, we have refactored our user store into a stand-alone module called user.js to handle the user-related Vuex store. Similarly, we will be doing a new module that will handle all the todo related Vuex store. To do that,
*) create a file called todos.js in @/store/modules
*) link todos.js that to our root store file src/store/index.js
check this PR if you have doubts.
c. Setup the todos.js for the Vuex module
Now, is the most important part, We have only a clean file, Need to create the Vuex action will call our API and fetch the response and will call the mutation to set that response in turn which can be handled by Vuex getters.
- Need to import the API to the todos.js
The GET API call that we have added in a separate helper file apiHelper.js, we need to import that file, then only we can call the API from todos.js file
import ApiHelper from '@/services/ApiHelper'2. Create a State for todos.js
We need to have a state object which will contains all the todos we will be created or fetched from the Rails API, which is,
state: {
todos: []
}3. Mutation for todos.js
Only mutations can alter state and which will be called based on the response from the Rails API. If the mutation is a success, we will call the success mutation and update the state and if it is a failure response we will call the API and set as a failure.
mutations: { fetchAllTodoMutation (state, todos) { state.todos = todos }, failureTodoMutation (state) { state.todos = [] }}
4. Actions to the rescue
Actions are a middle man which is taking the value from the front end and will call the API if you need for GET/POST(only here case, not general) and then call the mutation to save that response. So we will not call the mutation directly, only by using the actions.
ApiHelper.todos() is the Rails API call and once it is a success will call the fetchAllTodoMutation and if it is a failure will call the failureTodoMutation
5. Call the todos workflow once the user is signed up
So far, we have created the whole todos Vuex workflow, but we need to call this API when the user is signed up, to do that, needs to call the fetchAllTodoAction.
inside our loginAction, needs to call the same action. Calling an action inside an action is achieved by the dispatch
dispatch('fetchAllTodoAction', null, { root: true })That's it, now when the user signed in, will call the Rails GET API to fetch the todos.
We have got 2 todos, which is accessed using the allTodos getters.
PR for the changes.
d. Some styles for the todos
currently, we don’t have much of a style here, added a beautiful style which is there in the vuetify page. Link.
we will copy this style and will add some changes to that.
Awesome will proceed to the next part
2. Option to create new todo
Now, we have successfully fetched the data from the API and it is the time to create a new todo from the Vue app. To do that needs to
a. Register API for the POST Request
b. Enhance the todos.js to create and accepts new todo
a. Register API for the POST Request
Similar to our GET request needs to create a POST using axios and added those in our common API file src/services/ApiHelper.js
b. Enhance the todos.js to create and accepts new todos
Here, we need to bunch of things.
- Able to input the data from UI and call the Vuex action.
- Run the action and fetch the response and call the mutation
3. Call the mutations and save that response to the state.
- Able to input the data from UI and call the Vuex action.
On pressing enter with a todo we need to call a callback function which will, in turn, the Vuex action.
We just need to parse the data as a hash which can be accepted by the Rails app. This is happening inside the .vue file.
2. Run the action and fetch the response and call the mutation
On calling the action, which will call the API and then fetch the response, and if it is a success, will call the saveTodoMutation and save those responses to the state.
ApiHelper.todo(todoData) is the API name which is used to POST the new request.
todoData is new todo object which is passing the Rails API backend.
3. Call the mutations and save that response to the state.
We have currently some todos are there, need to append new todo to the existing state.
Now, we can test this if it is working or not.
Awesome, new dummy data is created just now and it is updated the state and updated to the Rails API.
3. Option to complete the todo
Now, we have successfully created a todo, it is the time to complete a todo.
What we are going to do is on clicking the checkbox, will call a callback function which will call the Vuex action → will call the Rails API → which will call the Vuex mutation → will update the state accordingly.
1. Create the callback function on checking on the checkbox
when checkbox checked or unchecked, will pass the corresponding todo which needs to be updated to the callback function updateTodo
updateTodo method will call the Vuex action updateTodoAction and will display success if success response and set as a failure in the case of errors.
2. Vuex action to update the todo
Now, it is the time for action, which is called from the callback function from the updateTodo method.
Once the updateTodoAction is called, it will call the API and fetch the response
3. API for the updateTodo
ApiHelper.updateTodo() is defined our ApiHelper.js class. We need to call the API as a PUT request with the parameter to be passed. we are updating only completed or incompleted as a PUT request and return the response.
4. Mutation to update the state.
Once the API is a success, it will call the mutation from the action and then update the state with the completed or incompleted status.
All done, now we need to check it is working or not from the front end.
I have added a todo called dummy and now I will set it is as completed.
From the front end, it is marked as completed, now we can check the Vuex store and the Rails backend.
That’s it, Thank you guys for reading this, please do comment or clap if you like this. Suggestions are welcome.
ROR Heroku deployed endpoint: https://todorailsapiapp.herokuapp.com/Vue.js App app deployed link in netlify: https://todo-vue-app.netlify.com/#/loginemail/password in heroku endpoint: anoob@gmail.com/anoob@gmail.comGitHub-link for Vue.js App:https://github.com/anoobbava/todo_vue_appGitHub-link for the ROR App: https://github.com/anoobbava/todo_api
If this story helps you to learn anything, please feel free to buy me a coffee
Personnel details: GitHub-link . Linkedin Link
