Export and import Vuex state

If you are familiarized with Vuex, you must know that Vuex is a state management pattern library for Vue applications. Vuex centralizes the application’s state and how components, and other code parts, change it.

You can find a lot of articles talking about Vuex, I even wrote 2 articles 3 year ago talking about it: Vuex el redux de VueJS I and Vuex el redux de VueJS II (Spanish)

But today I will write about an edge case related to vuex, as you could read in the title, about how to export and import Vuex state.

Is a very easy process, and is not necessary for most of the applications, but I think is useful to know how to do it.

Export

Export is very simple, you only need to get the state, for example from a component

const savedState = this.$store.state

And voilà you have the store state, you could save in Local Storage to keep the state even if the user closes or reloads browser’s tab. Really you don’t need to write code for that, exists an awesome library that does that: vuex-persistedstate

Import

You can think that import the state is similar to export: this.$store.state = savedState If you try, you will get an Exception

Uncaught Error: [vuex] use store.replaceState() to explicit replace store state.

And if you read carefully, the exception message gives to you the solution: Use store.replaceState()

This store method replaces all the store state (the root state). For example, Vue Dev Tools uses it to do the time travels.

Applications

I can think of a few applications for this, as I mentioned before, save the state to Local Storage, or export and save state to a JSON file to save your application settings, etc…