Clear all stores

[darthf1]

Hi!

I'm trying to create a function / plugin to reset all stores, which is also described in #693. I'm using Nuxt, so this is my plugin:

import { defineNuxtPlugin } from '@nuxtjs/composition-api'
import { Store } from 'pinia'

declare module 'pinia' {
  export interface PiniaCustomProperties {
    resetAllStores: () => void
  }
}

let stores: Store[] = []

const resetAllStores = () => {
  for (const store of stores) {
    store.$reset()
  }
  stores = []
}

export default defineNuxtPlugin(({ $pinia }) => {
  $pinia.use(({ store }) => {
    stores.push(store)
  })

  $pinia.use(resetAllStores)
})

However, this leads to the following error:

🍍: Store "organisation" is build using the setup syntax and does not implement $reset().

I would expect that this function is always there, because I can run

const store = useMyStore()
store.$reset()

[LMarcinkowski]

Any idea how to reset store in setup syntax?

[vip9]

You could use $dispose(), as described #597

[Sjoerd82]

$dispose doesn't seem to do anything... turns out it's very hard to kill Pinia stores, once created...

[tcm151]

calling $dispose() worked for me instead of calling $reset()

[ahmedelghandour1]

That's how i reset all the stores:

• call setInitialState function immediately after installing pinia to vue instance with app.use(pinia)
• then call resetState once you need to reset the state.

import {
  createPinia as crPinia, Pinia, StateTree,
} from 'pinia';
import serialize from 'serialize-javascript';
import user from './user';
import core from './core';

let pinia: Pinia;
let initialState: Record<string, StateTree>;

const useStore = {
  user,
  core,
};

export const setInitialState = (): void => {
  const stores = Object.keys(useStore) as Array<keyof typeof useStore>;
  stores.forEach((store) => {
    useStore[store]();
  });
  initialState = JSON.parse(serialize(pinia.state.value));
  console.log(initialState);
};

export const resetState = (): void => {
  const stores = Object.keys(useStore) as Array<keyof typeof useStore>;
  stores.forEach((store) => {
    useStore[store](pinia).$state = initialState[store] as never;
  });
};

export const createPinia = (): Pinia => {
  pinia = crPinia();
  return pinia;
};

export const usePinia = (): Pinia => pinia;

export default useStore;

[kurt-liao]

Hi, @ahmedelghandour1

I follow your steps code to create my store with resetState function, many thanks.

I import resetState in my router file and use it in navigation guard, but once I update my component, it will show error that say I can't access store before initialization

following are my part of codes:

// store.ts

import { createPinia as _createPinia, StateTree, Pinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
import { useUserStore } from './modules/user'
import { useAppStore } from './modules/app'
import { useTimeStore } from './modules/time'
import { usePermissionStore } from './modules/permission'
import { useSettingsStore } from './modules/settings'

let pinia: Pinia
let initialState: Record<string, StateTree>

const useStore = {
  useUserStore,    // Error line here
  useAppStore,
  useTimeStore,
  usePermissionStore,
  useSettingsStore
}

export const setInitialState = (): void => {
  const stores = Object.keys(useStore) as Array<keyof typeof useStore>
  stores.forEach((store) => {
    useStore[store]()
  })
  initialState = JSON.parse(JSON.stringify(pinia.state.value))
}

export const createPinia = (): Pinia => {
  pinia = _createPinia().use(piniaPluginPersist)
  return pinia
}

export const resetState = (): void => {
  const stores = Object.keys(useStore) as Array<keyof typeof useStore>
  stores.forEach((store) => {
    useStore[store](pinia).$state = initialState[store] as never
  })
}
...

// router.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Home from '@/views/home'
import FrontStageLayout from '@/views/frontstage'
import BackStageLayout from '@/views/backstage'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { resetState } from '@/store' // Import resetState function here, and I got error while hmr

...

I do not know how to fix it, have any idea for that?

[ahmedelghandour1]

read this #911 (comment)

[mohamedaminefh]

Hi there, I've used this approach and it worked for me

import { getActivePinia } from "pinia"

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

Note getActivePinia() must be called after app.use(pinia) and that in SSRs it must be called within script setup or the setup() function

if there is a better way, please let me know

[manuchekhr32]

It says Property '_s' does not exist on type 'Pinia'. and it isn't working inside of my <script setup>

[manuchekhr32]

If you use TypeScript this solution is better I think:

interface ExtendedPinia extends Pinia {
  _s: Map<string, Store>;
}
export const $ResetPinia = (): Record<string | "all", () => void> => {
  const pinia = getActivePinia() as ExtendedPinia;

  if (!pinia) {
    throw new Error("There is no stores");
  }

  const resetStores: Record<string, () => void> = {};

  pinia._s.forEach((store, name) => {
    resetStores[name] = () => store.$reset();
  });

  resetStores.all = () => pinia._s.forEach((store) => store.$reset());
  return resetStores;
};

[coderabsolute]

For some reason, this cleanest method doesn't reset my stores. It could be because I'm using pinia-plugin-persistedstate.

I wrote the resetStore() and then called it manually. :(

export const useFiltersStore = defineStore('filters', {
  state: () => ({
    workOrder: {
      title: null
    }    
  }),
  persist: true,
  getters: {},
  actions: {
    resetStore() {
      this.workOrder.title = null
    }
  }
})

[lobo-tuerto]

@mohamedaminefh I used a different way to iterate over the stores. And also made an example reusable function useResetStore() over here: TIL: How to reset all stores in Pinia

Hope it helps others too. ✌️

[mohamedaminefh]

Nice blog @lobo-tuerto 💙, Thanks for sharing

[EvidenceEkanem]

Perfect. Thanks for sharing @lobo-tuerto

[ahmedelghandour1]

Here's the latest functionality for reseting pinia stores with SSR support:

// stores/plugins/resetStores.ts

import type {
  PiniaPluginContext,
  StateTree,
  Store,
  _ActionsTree,
  _GettersTree,
} from "pinia";

declare const window: Window & {
  INITIAL_STATE_FOR_RESET: Record<string, StateTree>;
};

type _Store = Store<string, StateTree, _GettersTree<StateTree>, _ActionsTree>;
export const state: Record<string, StateTree> = {};
export const stores: Record<string, _Store> = {};

if (!import.meta.env.SSR) {
  Object.assign(state, window.INITIAL_STATE_FOR_RESET);
}

/**
 * @description reset all registered stores in pinia.
 * @returns void
 */
export function resetAll(): void {
  Object.keys(stores).forEach((storeName) => {
    stores[storeName].$patch(state[storeName]);
  });
}

export function resetState({ store }: PiniaPluginContext): void {
  if (import.meta.env.SSR) {
    const initialState = JSON.parse(JSON.stringify(store.$state));
    state[store.$id] = initialState;
    stores[store.$id] = store;
    store.$reset = () => store.$patch(JSON.parse(JSON.stringify(initialState)));
    store.$resetAll = resetAll;
  } else {
    stores[store.$id] = store;
    store.$reset = () =>
      store.$patch(
        state[store.$id] || JSON.parse(JSON.stringify(store.$state))
      );
    store.$resetAll = resetAll;
  }
}

// stores/index.ts

import { createPinia as crPinia } from "pinia";
import type { Pinia } from "pinia";
import { resetState, state } from "./plugins/resetStore";

let pinia: Pinia;

export const createPinia = (): { pinia: Pinia; ssrState: typeof state } => {
  pinia = crPinia();
  pinia.use(resetState);
  return { pinia, ssrState: state };
};

export const usePinia = (): Pinia => pinia;

[SemenKluchko]

How to use it? I cannot understand(

[SemenKluchko]

@ahmedelghandour1

[xkubow]

Hi I don't see where you use _createPinia method. That method have to be the first call before other store manipulation. Dne čt 7. 7. 2022 3:18 uživatel Kurt ***@***.***> napsal:

…

Hi, @darthf1 <https://github.com/darthf1> I follow your steps code to create my store with resetState function, many thanks for this. I import resetState in my router file and use it in navigation guard, but once I update my component, it will show error that say I can't access store before initialization following are my part of codes: // store.ts import { createPinia as _createPinia, StateTree, Pinia } from 'pinia'import piniaPluginPersist from 'pinia-plugin-persist'import { useUserStore } from './modules/user'import { useAppStore } from './modules/app'import { useTimeStore } from './modules/time'import { usePermissionStore } from './modules/permission'import { useSettingsStore } from './modules/settings' let pinia: Pinialet initialState: Record<string, StateTree> const useStore = { useUserStore, // Error line here useAppStore, useTimeStore, usePermissionStore, useSettingsStore}... // router.ts import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'import Home from '@/views/home'import FrontStageLayout from '@/views/frontstage'import BackStageLayout from '@/views/backstage'import NProgress from 'nprogress'import 'nprogress/nprogress.css'import { resetState } from '@/store' // Import resetState function here, and I got error while hmr ... [image: 2022-07-07_09-18] <https://user-images.githubusercontent.com/32745146/177668888-0959ed0a-2c7a-45e3-93e0-ba71a2a26b84.png> I do not know how to fix it, have any idea for that? — Reply to this email directly, view it on GitHub <#911 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACGRXEQMH25BXQZYWKUK3ATVSYV7XANCNFSM5KNT2ASA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[agm1984]

I'm using this code:

import { getActivePinia } from 'pinia';

export const resetAllPiniaStores = () => {
    const activeStores = Object.keys(getActivePinia().state.value);

    activeStores.forEach((store) => {
        getActivePinia()._s.get(store).$reset();
    });
};

followed by:

import { resetAllPiniaStores } from '@/store/index';

const logout = async () => {
    auth.logout();

    await router.push({ name: 'login' });

    resetAllPiniaStores();
};

[davidAtInleague]

is the _s property an api guarantee?

[tintin10q]

Does anyone know this?

[davidAtInleague]

maybe helpful: #1859

[tintin10q]

After looking at #1859 thank you @davidAtInleague
I came up with this typescript solution:

import { Store } from "pinia";

const AllPiniaStores = new Set<Store>();
pinia.use(({ store }) => {
  AllPiniaStores.add(store);
  store.$all = AllPiniaStores;
  store.$reset_all = () => store.$all.forEach((s) => s.$reset());
});

declare module "pinia" {
  export interface PiniaCustomProperties {
    $all: typeof AllPiniaStores;
    /** Reset all the stores */
    $reset_all: () => void;
  }
}

[aryan-myrtle]

if you don't care and don't mind about a page refresh. You could just use window.reload or router.go(0) to reset everything.

[notflip]

Not if you're using the persist plugin

[metalsadman]

call locationStorage.clear() then location.reload()

[tintin10q]

Only works if you are using local storage but good idea.

[pepitoxxx]

this work and is less tricky i think

import { defineStore, getActivePinia } from "pinia";

function resetAllStores() {
    const activepinia = getActivePinia();
    if (activepinia) {
    Object.entries(activepinia.state.value).forEach(([storeName, state]) => {
      const storeDefinition = defineStore(storeName, state);
      const store = storeDefinition(activepinia);
      store.$reset();
    });
  }
}