Vue+Typescript开发登录功能时getter调用前无法等待值设置问题

你的问题由三处逻辑错误和概念使用不当导致，和TypeScript语法本身无关，具体修复如下： #

核心错误点 #

• 不必要的await使用：setToken、setUser工具函数、isSignedIn getter均为同步逻辑，加await不会改变执行顺序，反而会误导你对执行时机的判断
• 状态同步遗漏：你只把登录成功的用户、令牌数据存入了sessionStorage，但userModule中定义的user、token本地变量仅在模块初始化时读取了一次sessionStorage，后续sessionStorage更新不会自动同步到这两个变量，isSignedIn getter读取的始终是旧值
• Mutation未调用：你定义了setUser、setToken两个Mutation用来更新store状态，但实际调用的是存sessionStorage的工具函数，store状态始终没有更新

修复代码 #

1. 修改userModule的signIn Action #

@Action({ rawError: true })
public async signIn(userInfo: { username: string; password: string }) {
  const { username, password } = userInfo;
  // 登录接口逻辑保留
  const { data } = await login("login", { username, password })
  alert(`Sign in from api ->  ${JSON.stringify(data)}`) 

  // 存入sessionStorage（同步方法无需await）
  setToken(data.accessToken);
  setUser(JSON.stringify(data.user))

  // 调用Mutation更新store本地状态
  this.setToken(data.accessToken)
  this.setUser(data.user)

  // 同步getter直接读取，无需await
  const theUser = this.isSignedIn
  console.log('The User : ', theUser) // 此时会正确返回true
}

2. 修改Login组件的login方法 #

private async login() {
  await userModule.signIn({ username: this.username, password: this.pass })
  // 同步getter直接读取，无需await
  const usr = userModule.isSignedIn
  console.log('Signed in:', usr)

  if(usr) {
    this.goToDashboard()
  } else {
    alert('No user returned from user module')
    this.resetLogin()
  }     
}   

可选优化 #

如果不想手动维护store本地变量和sessionStorage的同步，可以直接修改getter逻辑，每次读取时都拉取sessionStorage的最新值：

get isSignedIn() {
  const latestUser = getUser();
  const latestToken = getToken();
  return !!latestUser.email && !!latestToken;
}

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