结合sessionStorage解决vuex页面刷新数据丢失的问题

最新推荐文章于 2024-11-05 00:19:42 发布

转载最新推荐文章于 2024-11-05 00:19:42 发布 · 509 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/luyuefeng/p/8031517.html

文章标签：

#javascript #json #ViewUI

本文介绍如何在Vue应用中结合使用Vuex状态管理和sessionStorage来持久化数据。通过在Vuex的mutations中设置增加和减少计数器时同步更新sessionStorage，确保即使页面刷新也能保留状态。

将需要保存在vuex中的数据同时保存在sessionStorage中即可：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const state = {
    count: 0,
};

const mutations = {
    increaseCount(state, num) {
        state.count = state.count + num;
        sessionStorage.setItem('count', JSON.stringify(state.count));
    },
    reduceCount(state, num) {
        state.count = state.count - num;
        sessionStorage.setItem('count', JSON.stringify(state.count));
    }
}
// 页面刷新时，会从sessionStorage中重新读取并赋值
for(let key in state) {
    sessionStorage.getItem(key) ? state[key] = sessionStorage.getItem(key) : false;
}
export default new Vuex.Store({
    state,
    mutations
})