Pinia: How to reset stores created with function/setup syntax
Tags: vue, vue3, pinia, javascript
Published: 2022-04-19 08:14:45

---
title: Pinia: How to reset stores created with function/setup syntax
published: true
description: Learn how to reset stores made with function syntax by creating a Pinia plugin
tags: vue, vue3, pinia, javascript
//cover_image: https://direct_url_to_image.jpg
---

### What is Pinia

Pinia is a state management solution for Vue 3. 
If you are thinking "Oh, another tool?", the truth is that Pinia can be thought as the next version of Vuex 4. Or as Evan said:

{%embed
https://twitter.com/youyuxi/status/1463429442076745730?ref_src=twsrc%5Etfw
%}

Pinia shares a lot of similarities with Vuex but it's simpler, type safe and extensible! 

If you haven't tried it yet, checkout [the docs](https://pinia.vuejs.org) to get started!

### Object and Function stores

There are two ways of creating a store with Pinia.

**Object syntax**:

```js
import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    doubleCount: (state) => state.counter * 2,
  },
  actions: {
    increment() {
      this.counter++
    },
  }
})
```

**Function syntax:**

```js
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useStore = defineStore('main', () => {
  const counter = ref(0)
  const doubleCounter = computed(() => counter.value * 2)
  
  function increment() {
    counter.value++
  }

  return {
   counter,
   doubleCounter,
   increment
  }
})
```

The Object syntax looks very similar to Vuex. The Function syntax is similar to a component `setup()` method where we manually define  reactivity.

### How to reset the store with Object syntax

When using Object syntax you can simply call the built-in `$reset` method:

```html
<script setup>
import { useStore } from './useStore'

const store = useStore()

store.$reset // 👈

</script>
```
However, with Function syntax the built-in `$reset` method simply throws an error:

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

### How to reset the store with Function syntax

In order to make `$reset` method work with Function syntax we are going to create a Pinia plugin: ✨

*reset-store.js*

```js
import cloneDeep from 'lodash.clonedeep'

export default function resetStore({ store }) {
  const initialState = cloneDeep(store.$state)
  store.$reset = () => store.$patch(cloneDeep(initialState))
}
```

Here, we deep-copy the initial state of the store with [lodash.clonedeep](https://www.npmjs.com/package/lodash.clonedeep) and we add the `$reset` function which sets the state to its initial value. It's important to deep-copy the state again in order to remove references to the copy itself.

With `store.$patch` we apply multiple changes at the same time. [Read more on the docs](https://pinia.vuejs.org/core-concepts/state.html#mutating-the-state).

Then in `main.js` or wherever you initialize Pinia:

```js
// ...
import { resetStore } from './reset-store'

//...
const pinia = createPinia()
pinia.use(resetStore)

app.use(pinia)

//...
```

See demo [here on Stackblitz](https://stackblitz.com/edit/vue3-reset-pinia-store-owsjvm?file=src%2Fstore%2Fplugins%2FstoreReset.js) or embed:

{% embed https://stackblitz.com/edit/vue3-reset-pinia-store-owsjvm?file=src%2Fstore%2Fplugins%2FstoreReset.js %}

[Learn more about Pinia plugins](https://pinia.vuejs.org/core-concepts/plugins.html)

### Conclusion

Awesome! Now no matter if we use Object or Function syntax, `$reset` method works! 🥳🥳

*I want to thank on of the best Vue devs out there @tony19 for [his answer on StackOverflow](https://stackoverflow.com/a/71760032/6385184).*