In this post, we check the meaning of the basic keywords of the store’s options object in PINIA. These are the States, Actions, and the Getters. In PINIA you will define separate stores. While Vuex State Manager stores state at a single root level by default. These separated PINIA stores together will provide the Global Store in the PINIA State Manager.

Create a PINIA Store

Let’s create our first PINIA store example. It will be a simple javaScript file. You can name it anyhow you want. Although, it is good practice to follow the ‘Store’ suffix convention. For example WhateverStore.js and place these files into a dedicated folder like stores. See below the screenshot. You can see there is a ProductStore.js inside the store folder.

First, you need to import the defineStore method from PINIA. The
defineStores method takes two parameters a name that should be unique in the whole project, and options object as a second parameter where you can define the body of the options object. We need to export the definStore so we assign it to a property. It is also a good practice to use the ‘use’ prefix and the ‘store’ suffix for the property name.

What the PINIA States is!

The state is the central part of your stores. It is the whole reason the store exists. So it’s used for defining data that should be accessible across all components of your application. It does not mean every file or component should use it, but the option is there.

    // Example state with an items array return
    state: () => {
        return {
            items: [],
        }
    }

What are Actions in PINIA?

Actions in your store are synonymous with methods for your component except they denoted mutating your store’s data instead of a component’s local data. You can see an example here of how to define it.

    // Example addItem Action that adds a new the items to the array
    actions:{
        addItems(item){
                this.items.push(item);
        }
    }

What are Getters?

Getters are synonymous with computed props in a component. Its purpose is to return a computed value based on the store’s state.

    // Example count Getter that return the length of the items array
    getters:{
        count(){
            return this.items.length;
        }
    }

Conclusion & Closing

In this post, I tried to highlight the basic mini-steps on how we can define a store in PINIA. How we can structure the code for the three main blocks of the defineStore’s options object and what are the main keywords that define the behavior of a store. Thanks for reading!