angular - Angular/NGXS 示例代码 - 无法获取参数输入的引用

Question

我正在尝试实现此处提到的登录。

https://ngxs.gitbook.io/ngxs/recipes/authentication

  @Action(Login)
  login({ patchState }: StateContext<AuthStateModel>, { payload: { username } }: Login) {
    return this.authService.login(payload).pipe(tap((result: { token: string }) => {
      patchState({ token, username });
    }))
  }

但是我无法获得示例中所示的“有效负载”的引用，而是出现以下错误。任何帮助表示赞赏！我还想知道函数的输入参数中的 '{ payload: { username } }' 是什么意思。

Answer 1

这是文档中的错误。

看这里：

export class Login {
  static readonly type = '[Auth] Login';
  constructor(public payload: { username: string, password: string }) {}
}

和这里：

login({ patchState }: StateContext<AuthStateModel>, { payload: { username } }: Login) {

这是一个解构错误，需要：

@Action(Login)
login({ patchState }: StateContext<AuthStateModel>, { payload }: Login) {
  return this.authService.login(payload).pipe(tap((result: { token: string }) => {
    patchState({ token, username: payload.username });
  }))
}

这会解构登录名payload，然后username通过payload.username.

凭证在上游发送，令牌在下游返回。AuthStateModel 是通过 StateContext 修补的。

Git 责备 authentication.md

什么是解构？

{ payload: { username } }是解构赋值 。在函数参数的上下文中，它意味着“在这个对象中，我对这些属性感兴趣”。看着login()，它的意思是，“我只感兴趣username（如上所述，这是错误的）。

我希望这有帮助！

更新：

此修复已合并到#653中。

只是为了澄清：

let a = { payload: { username: { first: 'rafael', last: 'cepeda' } } };
let { payload: { username } } = a;//unwraps payload.username
console.log(username);//works
console.log(payload);//error

使固定：

let a = { payload: { username: { first: 'rafael', last: 'cepeda' } } };
let { payload } = a;//unwraps payload
console.log(payload.username);//works
console.log(payload);//works