使用vuex-persist时，修改/删除localStorage后刷新状态重置如何解决？是否必要？

是否有必要修复？ #

这取决于你的业务场景：

• 如果是生产环境：用户手动篡改localStorage可能导致应用状态异常（比如伪造登录状态），这时需要做状态校验或恢复逻辑，避免应用崩溃或出现安全问题。
• 如果只是开发调试阶段：手动修改localStorage属于调试行为，重置状态是预期结果，没必要额外处理。

可行的解决办法 #

1. 自定义vuex-persist的状态恢复逻辑 #

通过restoreState方法校验从localStorage读取的状态，若状态非法（被篡改、删除或格式错误），则返回undefined让Vuex使用初始状态：

const vuexLocal = new VuexPersistence({
    storage: localStorage,
    // 自定义恢复逻辑
    restoreState: (key, storage) => {
        const savedStr = storage.getItem(key);
        if (!savedStr) return undefined;
        
        try {
            const savedState = JSON.parse(savedStr);
            // 校验核心模块（比如Auth）是否存在且结构合法
            if (!savedState?.Auth) {
                return undefined; // 使用初始状态
            }
            return savedState;
        } catch (error) {
            // JSON解析失败时返回初始状态
            return undefined;
        }
    }
})

export default createStore({
    modules: {
        Auth
    },
    plugins: [
        vuexLocal.plugin
    ]
})

2. 监听localStorage变化并同步状态 #

如果需要在页面运行时（非刷新）感知localStorage的修改并同步到Vuex，可以通过覆盖localStorage的原生方法来监听变化：

// 在store初始化前执行（比如main.js）
// 重写setItem
const originalSetItem = localStorage.setItem;
localStorage.setItem = function(key, value) {
    const event = new CustomEvent('localStorageUpdated', {
        detail: { key, value }
    });
    window.dispatchEvent(event);
    originalSetItem.apply(this, arguments);
};

// 重写removeItem
const originalRemoveItem = localStorage.removeItem;
localStorage.removeItem = function(key) {
    const event = new CustomEvent('localStorageRemoved', {
        detail: { key }
    });
    window.dispatchEvent(event);
    originalRemoveItem.apply(this, arguments);
};

然后在Vuex中添加自定义插件监听事件：

const syncLocalPlugin = store => {
    // 监听localStorage修改
    window.addEventListener('localStorageUpdated', (e) => {
        const { key, value } = e.detail;
        // 只处理vuex-persist存储的key（默认是'vuex'，可在vuexLocal配置中自定义）
        if (key === 'vuex') {
            try {
                const newState = JSON.parse(value);
                store.replaceState(newState);
            } catch (err) {
                console.error('同步localStorage状态失败:', err);
            }
        }
    });

    // 监听localStorage删除
    window.addEventListener('localStorageRemoved', (e) => {
        if (e.detail.key === 'vuex') {
            // 移除后可选择重置为初始状态，或保留当前内存状态
            // store.replaceState(初始状态对象);
        }
    });
};

// 在store的plugins中添加该插件
export default createStore({
    modules: {
        Auth
    },
    plugins: [
        vuexLocal.plugin,
        syncLocalPlugin
    ]
})

关于你之前尝试的方法 #

你在根组件中通过beforeunload和load事件手动同步状态的方式确实不合理：

• vuex-persist本身已经会在每次mutation触发后自动同步状态到localStorage，beforeunload再写入属于重复操作。
• 若用户手动修改了localStorage，beforeunload会把当前内存中的Vuex状态覆盖回去，反而会丢失用户的修改（如果是合法修改的话），同时和vuex-persist的恢复逻辑冲突，容易导致状态不一致。

内容的提问来源于stack exchange，提问作者ilya