Pinia 🍍✨

About

Pinia is your best friend when it comes to avoiding redundancy and unnecessary repeated calls in your code, Pinia's stores allow you to modify them without updating the page, and allow you to share states across different components.

I invite you to check out this short video to have a basic idea of how pinia can be implemented.

Now some examples of how we're (or should be) implementing Pinia in this project:

Defining stores

Here we create an array that contains users information like their id and profile picture, aswell as some info about their most recent post, like the amount of comments and likes it had:

export let users_info: Array<user> = [ // We create the array users_info an make it accesible with export
{
    user_id: 10010210201,
    user_pfp: 'profile.jpg',
    recent_post: {
        comments: 18,
        likes: 69,
    }
},
{
    user_id: 5434343243,
    user_pfp: 'profile.jpg',
    recent_post: {
        comments: 54,
        likes: 45,
    }
}
]

Now in a separated file with the help of Pinia, we define a store that returns values from the array previously created:

import {defineStore} from 'pinia'   // We import the method defineStore to.. well.. define a store...
                                    // This method requires a unique id or name as it's first argument,
                                    // to identify our store

export useUserStore = defineStore('User')   // We name our store as useUserStore, and we give it the id "User"
//     ^^^    ^^^^^
//       |        |
//       This is the recommended structure for naming stores, according to Pinia's official docs    

-Kolozuz