Состояние Vuex не обновляется из локального хранилища

Question

У меня возникают проблемы с обновлением состояния Vuex из локального хранилища при посещении маршрута непосредственно из адресной строки в окне в режиме инкогнито.

При непосредственном посещении маршрута /shop/:key? (например, нажав ссылку в сообщении электронной почты) выполняется смонтированное действие getDetail и обновляется локальное хранилище, но состояние не переоценивается - оно по-прежнему сообщает undefined, как если бы ключ не не существует

Есть ли способ переоценить состояние или его нужно обновить в мутации setDetail?

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

Состояние будет переоценено, если произойдет мутация (или действие).Вы можете изменить состояние напрямую, но это не рекомендуется, поскольку оно нарушает реактивность.

LocalStorage не является реактивным, и поэтому вам необходимо обновить состояние с помощью mutation или action. * 1006.*