There’s an important function I’ll want to use that comes with the Pinia library - storeToRefs. I’ll be using it in the component template, and it has to be reactive so it updates in sync with the state change. In this section, I’ll use a state property in the todoList.vue component, and I need it to be reactive to changes that might happen. In the previous section, I used an action from the Pinia store - addTodo - in my todoForm.vue component. Now I can open the Vue dev-tools and see that the item is being added to the todoList array in the store.
I’ll type npm run serve in the terminal to start up the Vue development server. import Īnd I’ll make sure that function is added to the form’s event listener in the template:
use() tells the Vue app to install Pinia as a plugin. This creates a Pinia instance to be used by my application. Then I’ll go into the main.js file and import createPinia. vue create todo-piniaĪfter I cd into the project folder, I’ll install pinia: npm install pinia Pinia also works with Vue 2, but I’ve personally gone totally in on Vue 3 (and haven’t looked back - check out my series on Vue 3 to read about my journey). I’ll create my Vue project (making sure to select Vue 3 since I want to use the Composition API). It’s a to-do list that lets me add, delete, and check off an item on the list. Here is a screenshot of the final project. I’ll show how I build it and provide some of my thoughts about the experience.
Soon is now! Today I will learn a little about Pinia by building a to-do list. I pushed onwards with using Vuex in that project but made a mental note to come back soon to Pinia to find out what it is all about. Pinia is now the official state management library for Vue! Well, that was a surprise! I had been hearing the word “Pinia” in relation to Vue but didn’t know exactly what it was. When I arrived at the Vuex documentation page, I saw this: It was my first time using Vuex with Vue 3 since I began my journey to learn the Composition API. I wanted to use Vuex to manage some global state properties. I was building a Vue 3 project for my recent blog series on how to build a full-stack live streaming web app.
0 kommentar(er)
