Vue.js硬刷新后state绑定的表单输入值丢失如何修复？

问题根源 #

Vuex的state默认仅保存在应用运行时内存中，用户触发硬刷新后整个Vue应用会重新初始化，Vuex中存储的authUser用户数据会被清空，mounted钩子执行时无法读取到对应字段值，所以表单就会出现空值情况。

解决方案 #

方案1：持久化存储Vuex用户数据

你可以将用户登录后的身份数据同步存储到localStorage或sessionStorage中，刷新后Vuex可以直接从本地存储读取初始值，不需要额外请求接口：

1. 修改Vuex authUser模块的逻辑，同步更新本地存储：

// Vuex authUser模块代码
const authUser = {
  state: {
    // 初始化时优先从localStorage取值
    user: JSON.parse(localStorage.getItem('authUser') || '{}')
  },
  mutations: {
    // 存储用户信息时同步更新到localStorage
    setUser(state, userInfo) {
      state.user = userInfo
      localStorage.setItem('authUser', JSON.stringify(userInfo))
    },
    // 退出登录时清除本地存储的用户数据
    clearUser(state) {
      state.user = {}
      localStorage.removeItem('authUser')
    }
  }
}

2. 原有页面的mounted逻辑不需要修改，即可实现刷新后正常回显。

方案2：刷新后主动拉取用户最新数据

如果不希望将用户数据存在本地存储，可以在页面初始化时增加判断，Vuex无数据时主动调用后端用户信息接口拉取数据，安全性更高：

// 修改页面的mounted逻辑
async mounted() {
  const user = this.$store.state.authUser?.user
  // Vuex存在用户数据直接赋值
  if (user?.firstName) {
    this.firstName = user.firstName
    this.lastName = user.lastName
    this.email = user.email
  } else {
    // 无数据时请求后端接口拉取，替换为你项目的用户信息接口方法即可
    const userInfo = await fetchUserInfoApi()
    // 先存入Vuex再赋值给表单
    this.$store.commit('authUser/setUser', userInfo)
    this.firstName = userInfo.firstName
    this.lastName = userInfo.lastName
    this.email = userInfo.email
  }
}

额外优化建议 #

可以将表单字段改为带get/set的计算属性绑定Vuex，省去手动赋值的步骤，代码更简洁易维护：

computed: {
  firstName: {
    get() {
      return this.$store.state.authUser.user.firstName || ''
    },
    set(val) {
      this.$store.commit('authUser/updateFirstName', val)
    }
  },
  // lastName、email字段同理实现即可
}

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