Vue中localStorage最佳使用位置：刷新页面保留Vuex的IS_REGISTERED状态？

需求与问题 #

需求：使用localStorage实现页面刷新时数据不丢失，通过Vuex管理用户是否注册的isRegistered状态，确保页面加载时维持注册状态。
问题：应在何处使用localStorage，才能在页面刷新时保留IS_REGISTERED状态？

原Vuex代码 #

export default {
    state:{
        isRegistered:false
    },
    actions:{
        registrate({commit}) {
            commit("login")
        },
        exit({commit}) {
            commit("logout")
        }
    },
    mutations:{
        login(state) {
            state.isRegistered=true;
        },
        logout(state) {
            state.isRegistered=false
        }
    },
    getters:{
        IS_REGISTERED(state){
            return state.isRegistered
        }
    }
}

原Vue组件代码 #

<template>
    <header class="hat">
        <div class="header__buttons">
            <div v-if="IS_REGISTERED" id="exit--tittle">
                <button @click="exitFromSystem">Exit from system</button>
            </div>
            <router-link :to="{name:'registration'}">
                <button id="registration" v-if="!IS_REGISTERED">Registration</button>
            </router-link>
        </div>
    </header>
</template>

<script>
    methods: {
        ...mapActions(["exit"]),
        exitFromSystem() { 
            this.exit() // Look in Vuex
        },  
    },
</script>

解决方案 #

需要在两个关键位置处理localStorage，保证状态的持久化和同步：

1. 初始化Vuex state时读取localStorage #

页面加载时，优先从localStorage读取之前保存的状态，没有则使用默认值false：

state: {
    // localStorage存储的是字符串，需做类型判断
    isRegistered: localStorage.getItem('isRegistered') === 'true'
}

2. 在mutations中同步更新localStorage #

每次通过mutations修改isRegistered状态时，同步把新状态存入localStorage，确保状态变更后本地存储也跟着更新：

mutations:{
    login(state) {
        state.isRegistered = true;
        localStorage.setItem('isRegistered', 'true');
    },
    logout(state) {
        state.isRegistered = false;
        localStorage.setItem('isRegistered', 'false');
    }
}

可选：兼容localStorage不可用的场景 #

部分浏览器环境可能禁用localStorage，可通过try-catch避免报错影响页面运行：

// 初始化state
state: {
    isRegistered: (() => {
        try {
            return localStorage.getItem('isRegistered') === 'true';
        } catch (e) {
            console.warn('无法访问localStorage', e);
            return false;
        }
    })()
},

// 修改mutations
mutations:{
    login(state) {
        state.isRegistered = true;
        try {
            localStorage.setItem('isRegistered', 'true');
        } catch (e) {
            console.warn('无法访问localStorage', e);
        }
    },
    logout(state) {
        state.isRegistered = false;
        try {
            localStorage.setItem('isRegistered', 'false');
        } catch (e) {
            console.warn('无法访问localStorage', e);
        }
    }
}

原理说明 #

• 页面初始化时从localStorage读取状态，保证刷新后能恢复之前的注册状态；
• mutations中同步更新localStorage，保证每次状态变更都能持久化到本地，下次加载时生效。

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