Build a To-do List App with Pinia and Vue 3

In this article, the author discusses their experience with building a To-Do List application using Pinia and Vue 3. They first encountered Pinia while working on a full-stack live streaming web app project where they initially used Vuex for state management but later decided to explore Pinia due to its official status as the recommended state management library for Vue. The author begins by setting up their Vue project and installing Pinia, then proceeds to create three components - TodoApp.vue (the parent component), TodoForm.vue (a child component), and TodoList.vue (another child component). They explain the concept of a Pinia store as a place to hold global state properties that can be accessed by any component in the project, making it easier to track changes to that global state. Next, they demonstrate how to create a store and set up their global state with Pinia. Unlike Vuex, there is no longer the need for mutations, which simplifies the process of changing state properties. They also explain how actions in Pinia follow the same mental model as methods, data, and computed properties in Vue 2. The author then proceeds to create an initial state with a todoList property, add actions to add and delete items from the list, and set up input forms to interact with these actions. They also discuss how to access Pinia store from a component and use reactive properties in Pinia. Finally, they demonstrate how to show completed items on the to-do list by adding styles based on whether an item is marked as complete or not, and how to delete items from the list using actions. They also provide a brief overview of how to add Typescript support to their project for better error catching and type safety. Overall, the author expresses enthusiasm about Pinia due to its simplicity and compatibility with Vue 3 and Typescript.