VueX更新用户数据后页面刷新恢复旧值问题求助

你的问题很典型：页面刷新后VueX状态重置为旧数据，是因为更新用户资料时只修改了内存中的Store，没有同步更新localStorage里的用户数据。

具体分析 #

• 登录流程没问题：登录成功后，你把token和用户数据同时存到了VueX Store和localStorage，页面初始化时如果能从localStorage读取数据，状态是对的。
• 但更新资料时，你只通过saveUserProfile mutation修改了VueX里的state.auth.user，却没把新的用户数据写回localStorage。当页面刷新时，VueX会重新初始化，此时它会从localStorage读取旧的用户数据（登录时存的那版），导致显示回旧值。

修复步骤 #

1. 同步更新localStorage（核心修改）

修改你的saveUserProfile mutation，在更新Store的同时，把新的用户数据存回localStorage：

saveUserProfile(state, payload){
  state.auth.user = payload
  console.log(state.auth.user)
  // 新增：将更新后的用户数据同步到localStorage
  localStorage.setItem('user', JSON.stringify(payload))
}

2. 确保Store初始化时读取最新的localStorage数据

你的Store初始化时，state里的auth是默认空值，需要改成从localStorage加载已有的数据，这样刷新页面时才能恢复最新状态：

export default new Vuex.Store({ 
  state: { 
    auth: { 
      // 从localStorage读取token，没有则为null
      apiToken: localStorage.getItem('token') || null,
      // 从localStorage读取用户数据，没有则为空对象
      user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {},
      // 根据是否存在token判断登录状态
      signedIn: !!localStorage.getItem('token')
    } 
  }, 
  getters, 
  mutations, 
  actions 
})

额外提醒 #

以后任何修改state.auth.user的操作（比如修改头像、邮箱等），都要记得同步更新localStorage，保证内存状态和持久化存储的一致性。这样不管页面怎么刷新，用户数据都会是最新的。

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