Question

当直接从隐身窗口的地址栏中访问路由时，我无法从本地存储更新Vuex状态。

直接访问路线/shop/:key?（例如，单击电子邮件中的链接）时，将执行已安装的操作getDetail，并且会更新本地存储，但状态不会重新评估-仍然表示未定义为如果密钥不存在。

是否有一种方法可以重新评估状态，或者必须在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更新状态。

Vuex状态未从本地存储更新

1 个答案: