Before diving into core concepts, we need to know that a store is defined using defineStore() and that it requires a unique name, passed as the first argument:. This name, also referred as id, is necessary and is used by Pinia to connect the store to the devtools.
Naming the returned function use.. is a convention across composables to make its usage idiomatic. We are defining a store because the store won't be created until useStore() is called inside of setup():. You can define as many stores as you want and you should define each store in a different file to get the most out of pinia (like automatically allow your bundle to code split and TypeScript inference).
If you are not using setup components yet, you can still use Pinia with map helpers.
Once the store is instantiated, you can access any property defined in state, getters, and actions directly on the store. We will see these in detail in the next pages but autocompletion will help you.
Get/Set in Computed Properties
Note that store is an object wrapped with reactive, meaning there is no need to write .value after getters but, like props in setup, we cannot destructure it:.
In order to extract properties from the store while keeping its reactivity, you need to use storeToRefs().
It will create refs for every reactive property. This is useful when you are only using state from the store but not calling any action. Note you can destructure actions directly from the store as they are bound to the store itself too:.
VueJS Useful Resources. Selected Reading. We have already seen methods for Vue instance and for components.
Computed properties are like methods but with some difference in comparison to methods, which we will discuss in this chapter.
At the end of this chapter, we will be able to make a decision on when to use methods and when to use computed properties.
Using the store #
Let’s understand computed properties using an example. Here, we have created .html file with firstname and lastname. Firstname and Lastname is a textbox which are bound using properties firstname and lastname.
We are calling the computed method getfullname, which returns the firstname and the lastname entered.