Vuex-persistedstate is an awesome library that lets you persist(save) certain or all parts of your Vuex store in a few ways, localStorage being the default one, so when you refresh your web page you don’t loose your state. This means you can keep your user data, your recent user searches, access tokens, etc. Awesome right?

What if you do a change in your Vuex store that required the user to have a clean store state?  You cant ask the user to clear their localStorage.

Here are a few clever ways to clear the persisted state, all with caveats that should be taken in mind.

Here is our basic code

function resetStoreState() {

if(process.env.NODE_ENV === 'development') return // don't clear during development

const currentHash = 'some-hash',
  savedHash = retrieve('jsHash')

if (savedHash !== currentHash) {

persist('jsHash', currentHash)




currentHash will be the hash we check for, savedHash is the one we have stored in localStorage or cookie or what ever. I just have a helper method to fetch and save to localStorage

So if the saved hash is not the same as the current one, we clear the vuex key from localStorage, effectively clearing our persisted state.

Manually when you actually do the change

You could trigger a clear manually when you know you have made change that requires a clean state. Just change the currentHash to the current timestamp or something unique and done. A bit more manual that one might like, but it works.

On every build

A more automated way to do this is to clear the state every time you deploy a new version. This of course can be an issue if you release frequently because the user could loose something.

If you are using laravel-mix and Laravel, you can use the hash that is generated by the production command.

<?php $hash = explode( '=', mix( 'assets/js/app.js' ) ); $hash = isset( $hash[1] ) ? $hash[1] : $hash[0] ?>
      window.Laravel = {!! json_encode([
                'jsHash' =>  $hash
            ]) !!};

Then just use window.Larvel.jsHash in as the value of  currentHash in the above example.

Using Webpack Hash

We can use Webpack to generate a hash and inject it into our code.

We could either use the special __webpack_hash__ variable

Note! As with the first method, you should do this only on production builds, because otherwise Webpack will change the hash on every build, clearing your stored state.

The special variable is produced by `HotModuleReplacementPlugin` and `ExtendedAPIPlugin`.

Go to the first script we did and add our new variable

const currentHash = typeof __webpack_hash__ !== 'undefined' ? __webpack_hash__ : ''

using ExtendedAPIPlugin

Instantiating the ExtendedAPIPlugin is easy, just remember to do this only on the production build as to not clear the cache on every change.

  webpackConfig.plugins.push(new webpack.ExtendedAPIPlugin())

We are adding our plugin instance to the webpackConfig object that we later pass to Wepback. Checking for production or not, could be done with process.env.NODE_ENV