Simple todo App with NuxtJS and Vuex

Tram Ho

Introduce

In this tutorial, you and you will practice creating a simple Todo List application with NuxtJS and Vuex. Basically, our application will have functions such as: adding, modifying, deleting a job, statistics and filtering out the unfinished and completed jobs. The entire source code I put on git you can go to see and easily follow here .

Todo App will have the interface as shown below:

Setting

To quickly have a NuxtJS project we will use the create-nuxt-app command. Make sure your computer has node installed. To check if the computer has installed the node we do a test in the terminal.

On my device, it is currently version v10.23.2 . If your computer does not report the node version, you can go full to install the node . Next, we will proceed to create a NuxtJS project.

After waiting for the run to finish you run npm run dev to run the server we will be.

Route

In the project’s pages directory, we create an additional file todos.vue . File it will look like this:

Once created in the pages directory. You access the address http://localhost:<your-port>/todos . We will have a similar interface below:

Display

In the template we will have the following code:

We will have an interface similar to the one below.

API

Here for a little bit I will setup a simple API with mockAPI . We access: https://www.mockapi.io/ to create an API with simple data as follows.

It should basically look like this:

So the interface and database are finished. Now let’s start coding the main functions !!!.

main fuction

Get todo data

For the data manipulation, I will use Vuex. In the store directory you create a file todos.js with the following state. We create an actions to call API and mutations to manipulate the state . I will use the axios module to operate.

The store function takes a default parameter, the first one is state and the second parameter is the data returned from the API. The getTodoList function has the first default parameter, vuexContext . In this function we use axios to call the API we created in the previous section to get data. After success we use the commit method to call the store function in mutations -> Put data in the state. In gettters we have 3 functions for data filtering purpose. The all function gets all data from state , progress and done we use the array’s filter function to filter out but todo according to the object’s isCompelete field.

Next comes the file todos.vue .

We will create a computed filterTodos to get the data to render and a data filter so that when we filter the data by 3 states all, progress, done . The filterTodos function we call the filterTodos getters . Here I call the getters function according to the filter variable in the data . The rest of the fields in my data will slowly explain below. In the li tag, I loop through the computed filterTodos to render the data in the view. Here I have to check the isCompelete field to check if todo is done then I will add line-through to it.

After the code we will have a view that is almost complete. Now we just need to add events to it.

Add a new todo item

To do this function we need to add some functions as follows:

In the todos.js file we add the add(state, content) to mutations to push the new element to the todoList in the state . The addTodo(vuexContext, content) function addTodo(vuexContext, content) I use axios to send a post request to the API after success, we will use a commit to call the add function in mutations to add a new element to the array -> computed changes -> re-render.

In todos.vue we attach an event when the user presses enter will trigger the addTodo(e) function in methods . This function will dispatch to the addTodo function in the actions of Vuex.

Modify an todo item

We will attach the click event to the span edit tab in the template. When the user click the clickEdit(todo) function is activated. This function will change the isEdit and the content of the data in the component. Why must to do that? I do this because when I click edit , I have to know which todo is being edit and must show an input box with the value of todo ‘s content and hide the span tag that is displaying the todo ‘s content being edited. The editTodo(todo) will dispatch to actions in Vuex and after editing is complete, we will change isEdit, content back to the same.

The editTodo function in actions similar to the addTodo function above and triggers the edit function in mutations .

Updating the status of an todo item

We will attach the click.self event to the li tag of each todoItem . When the user clicks on a todo , it changes the state to complete or incomplete. Once completed, the todo will be dashed. Function toggle also dispatch to function toggleTodo in store Exploration of Vuex .

The toggleTodo function in actions similar to the editTodo function above and triggers the toggle function in mutations . Specifically, we will change the data on the API and state of Vuex .

Delete a todo item

We will attach the click.stop event to the span delete tag of each todoItem .

The deleteTodo function in actions triggers the remove function in mutations . The use is similar to the above functions.

Filter

So we have finished the basic functions such as: Add, edit, delete already. Now we will proceed to create filters to see the completed, unfinished, or all works.

In the data I add a filter to see how we are filtering the data, the default will be all . The methods will correspond to the events when the user presses all , progress and done . In the computed we will calculate the number of todoList for visualization and the todoList we render by filter. In the filterTodos function we will call the filterTodos getter .

In the file store/todos.js . We will get getters corresponding to the filters.

After completing the filter, we will demo a little bit of the app:

summary

So we’ve completed a simple todo app with NuxtJS and Vuex. This simple todo App just helps us to get acquainted and practice with Vuex, a little bit about NuxtJS. Hope you will have more knowledge and apply effectively to your project. See you in other sharing articles.

Share the news now

Source : Viblo