CODEWITHSUNDEEP
vue.jsvuejs2vuex
user15909643
user15909643

Reputation:

Vuex: persisting state on page refresh without writing itvuex?

I am trying to make an app without a backend and I am using Vue with Vuex to set some state in a store of my app. Is there a way to persist this state after setting and doing a browser refresh without making a call to the server...or will it always just default back to the default initial state value after a page refresh?

Upvotes: 1

Views: 4751

Answers (3)

Laszlo Gazsi
Laszlo Gazsi

Reputation: 61

As Nino suggested, vuex-persist would do the job perfectly for you. It allows selecting the vuex modules that you'd like to persist, so you could skip what modules you don't want to persist, like some input values bind to state.

With vuex-persist you don't have to remember keys, or get/set values from localStorage.

Upvotes: 1

Nino Filiu
Nino Filiu

Reputation: 18473

There are many web APIs you can use to persist some state inside your user's browsers:

There's also a package specifically done for that

Upvotes: 1

iikkoo
iikkoo

Reputation: 2856

As stated in other answer, there are several ways to persist state.

Exploring local storage and Vuex there are some ways to achieve this.

Everything stored in local storage are strings that is stored as key-value-pairs. To store it in local storage you write

// Store value "value" with key "key"
localStorage.setItem('key', 'value');

// Load data from local storage store as a variable
let val = localStorage.getItem('key');

If you want to store an object you convert it to a JSON string

// Convert object to an JSON string and store it with key "key"
localStorage.setItem('key', JSON.stringify(object));

// Retrieve data and convert JSON string to object
let obj = JSON.parse(localStorage.getItem('key'));

You can use this from Vuex, storing certain values or the whole store.

For example in a vuex function you can check local storage if there is a value, and if not retrieve it from an api:

...
if (localStorage.getItem('key')) {
    // Use data from local storage
} else {
    // Get it from an api/other source
}
...

If you would like to store the whole store in local storage (not saying you should) and you want to be sure to always have the latest save, you could create a subscription in Vuex that gets triggered every time the store updates.

// Create a subscription that stores updates on every mutation
store.subscribe((mutation, state) => {
    // Store the store object as a JSON string
    localStorage.setItem('store', JSON.stringify(state));
});

When your Vue application is created you can call an action that checks local storage and if a store exists, loads it

if (localStorage.getItem('store')) {
    // Replace the store state object with the stored object
    this.replaceState(
        Object.assign(state, JSON.parse(localStorage.getItem('store')))
    );
...
}

This is a quick glance on how to store in local storage. You have to take into consideration how to reset/invalidate the data in local storage. You also have to decide on what to store. If you should have some kind of timestamp on it and so on.

There are plugins for vuex that does some of this for you. Have a look at https://github.com/vuejs/awesome-vue and see if you find anything.

Upvotes: 5

Related Questions