vuex刷新store值消失

Z时代
2024-03-01
分类：IT

进入页面，在某个方法中成功设置了某个store值。
刷新当前页，在路由守卫获取时——空值。
跳转路由时，在路由守卫获取时——有值。
虽然这个后来在APP.vue利用beforeunload和sessionStorage处理了下，但是还是搞不懂这个现象，有大佬可以为我解释一下嘛?

下图是设置store值的代码片段，这个设置完console出是有值的：
vuex刷新store值消失

下图是mutations代码片段，vuex的写法是没有问题的：
vuex刷新store值消失

下图是刷新时App.vue中获取值的显示，可以看到这个aiEngineUUID是空的（其它store有值）。
vuex刷新store值消失

下图是App.vue的解决方案。
vuex刷新store值消失

回答：

store 就是个页面中的全局变量，数据在内存中，刷新页面当然会消失。
你可以在 mutations 里直接设置

const getAiEngineUUID = () => {
    JSON.parse(sessionStorage.getItem("store"));
}
const setAiEngineUUID = (data) => {
    sessionStorage.setItem("store", JSON.stringify(data));
}
// 获取的时候
state = {
    aiEngineUUID: getAiEngineUUID(),
}
//...
SET_AI_ENGINE_UUID(state, aiEngineUUID) {
    //... 本地存储的代码
    setAiEngineUUID();
    state.aiEngineUUID = aiEngineUUID;
}
//...