Vuex state not updating from local storage

Question

I'm having some problems getting the Vuex state to update from local storage when visiting a route directly from the address bar in an incognito window.

When visiting the route /shop/:key? directly (for example clicking a link from an email) the mounted action getDetail is executed and local storage is updated but the state is not reevaluated - it still says undefined as if the key doesn't exist.

Is there a way to get the state to be reevaluate or does it have to be updated in the setDetail mutation?

const state = {
    key: localStorage.getItem('key'),
    details: null
}

const actions = {
    async getDetail({ commit }, key) {
        const details = await Service.detail(key)
        commit('setDetail', details)
    }
}

const mutations = {
    setDetail(state, details) {
        state.details = details
    }
}

const Service = {
    detail: async function(key) {
        const url = `/store/${key}/`
        const response = await ApiService.get(url)
        localStorage.setItem('key', key)
        return response.data
    }
}

Answer 1

The state will be re-evaluated if a mutation (or action) occurs. You could change the state directly but this is advised against as it breaks reactivity.

LocalStorage is not reactive and as such you need to update the state using a mutation or an action .

Answer 2

localStorage might be returning a string instead of a boolean which if not properly handled could lead to vuex not updating state accordingly.