Pinia Crash Course #5 - Getters

Summary

In this tutorial, the focus is on creating getters in state management, specifically within Vue.js. Getters are used to filter and manipulate state data without modifying the original state. The video demonstrates how to create a getter to retrieve favorite tasks, toggle between displaying all tasks and favorites, and count the total number of tasks and favorite tasks. Additionally, it walks through how to style a filter navigation component to allow users to switch between views. The lesson highlights the power of getters for better state management and enhanced UI functionality.

Takeaways

• 😀 A getter is a special function in state management that retrieves specific values or manipulates data before returning it, without altering the original state.
• 😀 Getters can help filter or transform data, such as retrieving only tasks marked as favorites or displaying tasks as an array of titles.
• 😀 In Vue.js, getters are similar to computed properties, as they return a derived value based on the state.
• 😀 To create a getter in a Vue store, define a `getters` property inside the store object, which contains various getter functions.
• 😀 The example shows how to create a `faves` getter, which filters tasks based on their `is fave` property and returns only those marked as favorites.
• 😀 Getters are used in components by accessing them like regular properties, without invoking them as functions.
• 😀 To toggle between viewing all tasks or only favorite tasks, use a `ref` to manage the current filter state (either 'all' or 'faves').
• 😀 The `v-if` directive is used in the component to conditionally render lists of tasks based on the selected filter value ('all' or 'faves').
• 😀 To allow users to switch between 'all tasks' and 'favorite tasks', buttons are provided, updating the `filter` ref to toggle the displayed task list.
• 😀 Additional getters for the total task count and favorite task count are created using the `reduce` method to count specific conditions (such as favorites).

Q & A

What is the purpose of a getter in state management systems?

A getter in state management systems is a special type of function that retrieves or manipulates parts of the state without directly modifying it. It can return a modified or filtered version of the state, ensuring that the state remains unchanged.

Why might we choose to use getters instead of directly accessing the state?

Using getters allows for data manipulation before returning the value. This is useful when you need to filter, sort, or process data in a certain way (e.g., retrieving only favorite tasks) without modifying the original state directly.

What is the difference between a getter and a computed property in Vue?

A getter in a state management system, such as Vuex, works similarly to computed properties in Vue. Both return values based on the state but computed properties are specific to Vue components, while getters are part of the global state management system.

How does the filter method work in the script for creating the 'faves' getter?

The filter method creates a new array by iterating over the tasks and checking if the `isFave` property of each task is true. It then returns only the tasks that meet this condition, without modifying the original tasks array.

What role does the 'ref' function play in toggling between views?

The 'ref' function is used to create a reactive reference to the filter value. It toggles between 'all' and 'faves', determining which list of tasks (all tasks or only favorite tasks) is displayed in the component.

How does the 'v-if' directive work in relation to showing filtered tasks?

The 'v-if' directive conditionally renders elements based on the value of the 'filter' ref. If the 'filter' is set to 'all', it displays all tasks. If the 'filter' is set to 'faves', it only displays the favorite tasks.

What is the purpose of the 'reduce' function in the 'fave count' getter?

The 'reduce' function is used to accumulate a total count of favorite tasks. It iterates over the tasks and adds 1 to a counter for each task where the 'isFave' property is true, returning the total number of favorite tasks.

How does the Arrow function differ in handling the 'this' keyword in getters?

In the Arrow function, the 'this' keyword does not refer to the state object as in regular functions. Instead, you must pass the state as an argument to the function to access it. This is important for working with state in getters written using Arrow functions.

What is the significance of the 'tasks.length' property in the 'total count' getter?

The 'tasks.length' property simply returns the total number of tasks in the state. This getter is used to display the overall count of tasks, regardless of whether they are favorites or not.

How does the component render the number of tasks dynamically?

The component dynamically displays the number of tasks using the 'total count' and 'fave count' getters. When the filter value is changed (e.g., switching between all tasks and favorite tasks), the displayed counts are updated in real time.