Spotlight on vuex-reset
Tags: vue, vuex, javascript, clientside
Published: 2020-01-30 20:26:57

---
title: Spotlight on vuex-reset
published: true
date: 2019-10-23 03:10:11 UTC
tags: vue.js, vuex, javascript, client-side
canonical_url: https://ianwalter.dev/spotlight-on-vuex-reset/
---

![Spotlight on vuex-reset](https://ianwalter.dev/content/images/2019/10/vuex-reset-6.jpg)

[Vuex](https://vuex.vuejs.org/) makes it easy to manage the app-wide state for a [Vue.js](https://vuejs.org) application, but there is no built-in way to easily reset that state to it’s initial value. That’s where [vuex-reset](https://github.com/ianwalter/vuex-reset) comes in. It’s a small Vuex plugin that will allow you to reset a store and/or store module(s) to it’s initial state by calling a special reset mutation.

At [binx health](https://mybinxhealth.com) we're always trying to think of ways we can prevent leaking user information. We use vuex-reset to clear user information after it’s not needed anymore, like when a customer has finished placing an order or has logged out. Although that data is not accessible outside of our application, clearing that data provides a secondary safeguard around leaking that information in ways we did not intend.

Security isn’t the only use-case, though. The utility is generally useful whenever you need to reset state without having to write more code to do so. Let's look at an example in which a form has it's fields bound to a Vuex module's state:

```
import Vuex from 'vuex'
import VuexReset from '@ianwalter/vuex-reset'

// Create a Vuex store.
export default new Vuex.Store({
  // Add the vuex-reset plugin to the store.
  plugins: [VuexReset()],
  modules: {
    // The colorScheme module has initial values that we may want to 
    // reset to at some point.
    colorScheme: {
      namespaced: true,
      state: {
        name: 'Default',
        colors: [
          '#ff8080',
          '#95ffa4',
          '#ffe9aa',
          '#91ddff',
          '#c991e1'
        ]
      },
      mutations: {
      	// We need to add a dummy reset mutation so we can trigger 
        // the reset when desired.
        reset: () => {},
        // Here is an example mutation that can be used to update the 	
        // colorScheme values.
        save: (state, colorScheme) => Object.assign(state, colorScheme)
      }
    }
  }
})
```
<figcaption>store.js</figcaption>

```
export default {
  data () {
	// Copy the color scheme stored in the Vuex module to the 
	// component's data so it can be used as the default value
	// in the imaginary New Color Scheme form.
	return { colorScheme: this.$store.state.colorScheme }
  },
  methods: {
	save () {
	  // Save the new color scheme values from the imaginary New
	  // Color Scheme form to the store.
	  this.$store.commit('colorScheme/save', this.colorScheme)
	},
	reset () {
	  // Reset the color scheme to the initial 'Default' color scheme.
	  this.$store.commit('colorScheme/reset')
	}
  }
}
```
<figcaption>NewColorScheme.vue</figcaption>

When a user first navigates to the imaginary New Color Scheme form in the `NewColorScheme.vue` component the default values will be the initial values in the Vuex `colorScheme` module. They can then modify the name and colors of the color scheme and click a save button which would save those updated values to the store. If they ever wanted to reset those values to the `Default` color scheme, they could hit a reset button which would call the colorScheme `reset` mutation and vuex-reset would restore the initial color scheme. Check out a demo (of a different example) here:

[https://vuex-reset.ianwalter.dev](https://vuex-reset.ianwalter.dev)

I hope this article was helpful in explaining what vuex-reset is and why you would want to use it. If you find this utility useful, please [star it on GitHub](https://github.com/ianwalter/vuex-reset) and consider [sponsoring me](https://github.com/sponsors/ianwalter)!

[

ianwalter/vuex-reset

A Vuex plugin that makes restoring initial state to the store simple - ianwalter/vuex-reset

 ![Spotlight on vuex-reset](https://github.githubassets.com/favicon.ico)ianwalterGitHub

 ![Spotlight on vuex-reset](https://repository-images.githubusercontent.com/153390676/8d618e00-f678-11e9-87c6-796282bef7d9)
](https://github.com/ianwalter/vuex-reset)