Vuex状态未从本地存储更新

7kjnsjlb  于 2023-01-31  发布在  Vue.js
关注(0)|答案(2)|浏览(132)

当直接从匿名窗口的地址栏访问路线时,我在从本地存储更新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
    }
}
rsl1atfo

rsl1atfo1#

如果发生突变(或操作),状态将被重新评估。您可以直接更改状态,但建议不要这样做,因为它会破坏React性。
LocalStorage不是被动的,因此您需要使用mutationaction更新状态。

hc8w905p

hc8w905p2#

localStorage可能返回string而不是boolean,如果不适当地处理,则可能导致vuex不相应地更新状态。

相关问题