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' 的引用，而是出现以下错误。任何帮助表示赞赏！我还想知道函数的输入参数中的“{ 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 });
  }))
}

这会破坏 Login 的 payload，然后通过 payload.username.

引用 username

凭证向上游发送，令牌向下游返回。 AuthStateModel 通过 StateContext 进行修补。

Git Blame authentication.md

什么是解构？

{ payload: { username } }是解构赋值。在函数参数的上下文中，它的意思是，"in this object, I am interested in these properties." 看着 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

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

Angular/NGXS sample code - cannot get reference of the parameter input

angular

angular6

ngxs

rxjs6