Clear All pinia stores

Pinia is a store library and state management framework for Vue.js. Designed primarily for building front-end web applications, it uses declarative syntax and offers its own state management API. it released on November 2019, so let's say it's new to the tech industry.

In this blog i won't share how to use and create Pinia stores you can check that in the docs, but i'm gonna show you how to clear or reset all pinia stores at once.

One of the cases where you want to reset all stores is when you have for example a social media platform and the user logged out, you don't want to keep the last user's data stored in pinia right, so that's where you need to clear all stores.

At the time were this blog is created pinia does not have a built-in function that reset all the stores in its official docs, we hope they'll provide one soon.

So what is the solution here ? one solution i come up with is by resetting the stores one by one, so for example let's say you've created 3 pinia stores

userStore
postsStore
followersStore

We need to go to each of these stores and $reset them one by one, and this achieved like this

import { getActivePinia } from "pinia"

// map through that list and use the **$reset** fn to reset the state
getActivePinia()._s.forEach(store => store.$reset());

See this is the github discussion here