解决Vuex页面刷新数据消失的问题

最新推荐文章于 2025-04-30 15:18:25 发布

原创最新推荐文章于 2025-04-30 15:18:25 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

前端知识同时被 2 个专栏收录

33 篇文章

订阅专栏

Vue

24 篇文章

订阅专栏

本文探讨了在Vue应用中使用Vuex进行状态管理时，如何实现数据的持久化，防止页面刷新导致的数据丢失。介绍了两种方法：一是直接利用H5的本地存储如localStorage或sessionStorage；二是使用Vuex-persistedstate插件简化操作。

vuex可以进行全局的状态管理，但刷新后的数据会消失,每次还要手动存在本地缓存里很不方便，这不是我们想要的效果，怎么解决呢，我们可以结合本地存储做到数据持久化，也可以通过插件Vuex-presistedstate。

方法一利用H5的本地存储

vuex的state在localStorage或者sessionStorage或者其他存储方式中取值，在mutations，定义的方法中对Vuex的状态操作的同时也对存储也做相应的操作

示例代码
store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import createLogger from 'vuex/dist/logger';

import global from './modules/global';
import login from './modules/login';

Vue.use(Vuex);

const debug = process.env.NODE_ENV !== 'production';

export default new Vuex.Store({
    modules: {
      global,
      login,
    },
    strict: debug,
    plugins: debug ? [createLogger()] : []
});

store/login.js使用sessionStorage

const state = {
  loginState:  sessionStorage.getItem('loginState')||false,
  token:sessionStorage.getItem('token')||'',
  user:sessionStorage.getItem('user')||'',
  userName:sessionStorage.getItem('userName')||'',
};

const mutations = {
  [SET_USER](state, payload){
    state.user = payload;
    sessionStorage.setItem('user', payload);
  },
  [SET_TOKEN](state, payload){
    state.token = payload;
    sessionStorage.setItem('token', payload);
  },
  [SET_USERNAME](state, payload){
    state.userName = payload;
    sessionStorage.setItem('userName', payload);
  },
  [SET_LOGIN_STATE](state, payload){
    state.loginState = payload;
    sessionStorage.setItem('loginState', payload);
  }
};

方法二使用Vuex-persistedstate插件

插件将vuex与localstorage结合起来，不需要再写存储。
安装

npm install vuex-persistedstate --save

或者

<script src="https://unpkg.com/vuex-persistedstate/dist/vuex-persistedstate.umd.js"></script>

目前的环境版本

"vue": "2.2.4",
"vuex": "^2.5.0",
"vuex-persistedstate": "^2.5.4"

配置使用
store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import createLogger from 'vuex/dist/logger';
import createPersistedState from 'vuex-persistedstate'
import global from './modules/global';
import login from './modules/login';

Vue.use(Vuex);

const debug = process.env.NODE_ENV !== 'production';

const persistedState = createPersistedState({
  paths: ['login.token', 'login.userName', 'login.user', 'login.userType'],  // 需要持久化的数据,只有这几个数据需要持久化
  storage: window.sessionStorage   //vuex-persistedstate默认使用localStorage来固化数据，
})

export default new Vuex.Store({
    modules: {
      global,
      login,
    },
    strict: debug,
    plugins: debug ? [createLogger(), persistedState] : [persistedState]
});

对应的state在localStorage或者sessionStorage或者其他存储方式中不再进行取值操作，在mutations不再存值操作，插件完成关联操作。

const state = {
  user: '',
  userName: '',
  userId: '',
  userType: ''  
};

const mutations = {
  [SET_USER](state, payload){
    state.user = payload;
    // sessionStorage.setItem('user', payload);
  },
  [SET_TOKEN](state, payload){
    state.token = payload;
    // sessionStorage.setItem('token', payload);
  },
  [SET_USERNAME](state, payload){
    state.userName = payload;
    // sessionStorage.setItem('userName', payload);
  },
  [SET_USERID] (state, payload) {
    state.userId = payload
    // sessionStorage.setItem('userId', payload);
  },