Pinia Crash Course #6 - Actions

Summary

In this tutorial, we explore how to update the state in a Vue.js application using Pinia. The focus is on creating actions for adding, deleting, and toggling tasks, and demonstrating how these actions are linked with components. We implement a task form to add new tasks, a delete action to remove tasks, and a toggle action to mark tasks as favorites. The process includes setting up the store, invoking actions from components, and applying basic styling to the form. This lesson highlights the core concepts of state management and event handling in Pinia, making it easy for developers to implement dynamic task management functionality.

Takeaways

• 😀 Actions in Pinia are used to update the state in the store, allowing for better management and manipulation of data.
• 😀 A new property `actions` is added to the Pinia store, which contains functions to perform state modifications such as adding, deleting, and favoriting tasks.
• 😀 To add a task, a new action is created that takes a task object and pushes it into the `tasks` array in the state.
• 😀 The task form component allows users to input new tasks, and when submitted, it calls the `addTask` action to add the task to the store.
• 😀 The `handleSubmit` method ensures that only non-empty tasks are added to the store, resetting the input field once the task is added.
• 😀 For deleting tasks, an action filters out the task by its ID, removing it from the tasks array in the store.
• 😀 The `toggleFave` action allows users to mark a task as a favorite by toggling its `isFave` property between `true` and `false`.
• 😀 The task form uses Vue's `v-model` for two-way data binding, ensuring the input field is connected to the `newTask` state.
• 😀 In the task details component, click events on the trash icon and heart icon trigger the delete and toggle favorite actions, respectively.
• 😀 Dynamic styling is used for the heart icon to turn it red when a task is marked as a favorite and gray when it is not, using Vue's `:class` directive.

Q & A

What is the purpose of using actions in Pinia?

Actions in Pinia are used to modify the state in the store. Unlike Getters, which only retrieve data, actions can update the state, perform side effects, or trigger other logic such as adding, deleting, or toggling tasks.

How is a new task added to the store in the script?

A new task is added by calling the 'addTask' action in Pinia. This action takes a task object, which includes a title, a 'is fave' property (set to false initially), and a unique ID. The action then pushes this object into the 'tasks' array in the store.

What is the role of the 'ref' in the form component?

The 'ref' is used to bind input values to reactive references in Vue. In the case of the task form, the 'newTask' ref stores the task title as a string, which is updated as the user types into the input field.

What happens when the form is submitted in the task form component?

When the form is submitted, the 'handleSubmit' function is called. This function checks if the input has a value and, if so, creates a new task object with a title, 'is fave' set to false, and a unique ID. This object is then added to the task store via the 'addTask' action.

How is a unique ID generated for each new task?

A unique ID is generated using the Math.random function. This generates a random number between 0 and 10,000, which is then rounded down using Math.floor. While unlikely, this method could potentially generate the same number twice, but for the tutorial, it's considered sufficient.

What are the two additional actions besides 'addTask' mentioned in the script?

The two additional actions are 'deleteTask' and 'toggleFave'. The 'deleteTask' action removes a task from the store based on its ID, while the 'toggleFave' action toggles the 'is fave' property of a task, changing its favorite status.

How does the 'deleteTask' action work?

The 'deleteTask' action filters out the task with the matching ID from the 'tasks' array in the state. It uses the 'filter' method to create a new array that excludes the task whose ID matches the one passed as an argument.

What does the 'toggleFave' action do in the task store?

The 'toggleFave' action toggles the 'is fave' property of a task. It finds the task with the given ID using 'find', and then inverts its 'is fave' value, effectively switching the task's favorite status between true and false.

How is the 'fave' status visually represented in the app?

The 'fave' status is represented by a heart icon. When the 'is fave' property is true, the icon is colored red, indicating that the task is a favorite. When the 'is fave' property is false, the icon remains gray.

What styling is applied to the task form?

The task form is styled with a light gray background, padding, and centered content. The input field and button have specific styles like padding, font size, and a border radius. The button is given a yellow color with a custom font, and the input field has a gray border with rounded corners.