数据持久化

在VUE项目中，我们会遇到页面一刷新个人信息丢失的问题。那么该如何解决呢？下面是我的一些答案。

1.使用浏览器的 localStorage 或 sessionStorage：

• localStorage 用于长期存储数据，即使浏览器关闭后数据也不会丢失。
• sessionStorage 类似于 localStorage，但其中的数据仅在会话期间保存，在浏览器窗口关闭后会被删除。

示例代码如下：

// 存储数据
window.localStorage.setItem('userInfo', JSON.stringify(userInfo));

// 获取数据
const userInfo = JSON.parse(window.localStorage.getItem('userInfo'));

2.使用 Vuex 进行状态管理：

• 如果你使用了 Vuex，可以在 Vuex store 中保存用户信息，并监听页面的刷新事件，将数据存入 localStorage，然后在应用启动时从 localStorage 恢复数据。

首先封装storage 存储模块：

// 约定一个通用的键名
const INFO_KEY = 'userInfo'
 
// 获取个人信息
export const getInfo = () => {
  const defaultObj = { token: '', userId: '' }
  const result = localStorage.getItem(INFO_KEY)
  return result ? JSON.parse(result) : defaultObj
}
 
// 设置个人信息
export const setInfo = (obj) => {
  localStorage.setItem(INFO_KEY, JSON.stringify(obj))
}
 
// 移除个人信息
export const removeInfo = () => {
  localStorage.removeItem(INFO_KEY)
}

然后，创建user.jx文件，将数据存入vuex的同时也存入本地：

import { getInfo, setInfo } from '@/utils/storage'
export default {
  namespaced: true,
  state () {
    return {
      // 个人权证相关
      userInfo: getInfo()
 
    }
  },
  mutations: {
    setUserInfo (state, obj) {
      state.userInfo = obj
      setInfo(obj)
    }
  },
  actions: {},
  getters: {}
}

3.使用插件vuex-persistedstate

import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex);

const state = {};
const mutations = {};
const actions = {};

const store = new Vuex.Store({
    state,
    mutations,
    actions,
    plugins: [
        createPersistedState({
            storage: window.sessionStorage, // 存储方式：localStorage、sessionStorage、cookies
            key: "store", // 存储的 key 的key值
            paths: ['userInfo'], // 选择要持久化的状态
            // render(state) {
            //     return { ...state }; // 要存储的数据：本项目采用es6扩展运算符的方式存储了state中所有的数据
            // }
        })
    ]
});

export default store;

关键配置：

• plugins: Vuex 的插件列表。
  • createPersistedState: 使用 createPersistedState 插件来持久化 Vuex 中的状态。
    • storage: 设置存储类型，默认为 window.localStorage，这里设置为 window.sessionStorage，这意味着数据会在浏览器会话结束时清除。
    • key: 设置存储在浏览器中的 key 的名称，这里设置为 "store"。
    • paths: 指定要持久化的 state 属性路径，例如 ['userInfo'] 表示只将 userInfo 状态持久化。
    • render(state): 该方法用于指定哪些 state 数据应该被持久化，但是在这个例子中注释掉了这部分代码，因为使用了 paths 配置。如果未使用 paths，那么可以通过 render 方法来控制要持久化的状态。