读取数据NGXS角

Question

我正在使用NGXS..进行身份验证我试图在登录后获取当前的用户数据，并将其放在状态中，以便在主页(用户名、电子邮件和userType)中读取。

我的状态函数正在工作，并且在状态中设置了新的值，但是登录后我无法从主页读取它。

也许是我用来获取当前用户数据错误的方式

所以我需要读取存储在GetCurrentUser状态中的用户名和电子邮件

我的auth.state.ts文件

export class AuthStateModel {
  token: string;
  email: string;
  user_name: string;
}
@State<AuthStateModel>({
  name: "auth",
  defaults: {
    token: null,
    email: null,
    user_name: null,
  },
})
export class AuthState {
  @Selector()
  static currentUser(state: AuthStateModel) {
    return {
      email: state.email,
      user_name: state.user_name,
    };
  }
  constructor(private authService: AuthService) {}
  @Action(GetCurrentUser)
  getcurrentUser(ctx: StateContext<AuthStateModel>) {
    return this.authService.getCurrentUser().pipe(
      tap((x: any) => {
        const state = ctx.getState();
        ctx.patchState({
          email: x.email,
          user_name: x.user_name,
        });
      })
    );
  }
}

NGX-记录器-来自检查元件的插件

next state {auth: {…}}auth: {token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJod…hYSJ9.nwYZyOmIVLLGx_1FvmrQ-u--6fp0nVphwRfNyE14Xsc", email: "asd@asd.com", user_name: "hsss"}

我的CompanyhomeComponent.ts文件

@Component({
  selector: "kt-companyhome",
  templateUrl: "./companyhome.component.html",
  styleUrls: ["./companyhome.component.scss"],
})
export class CompanyhomeComponent implements OnInit {
  constructor(private store: Store) {}

  ngOnInit(): void {
    this.store.dispatch(new GetCurrentUser());
  }
}

现在，我如何在CompanyhomeComponent.html中读到它，我尝试了很多方法，但都没有用

Answer 1

组件需要从存储区中选择值。由于您已经定义了一个@Selector，所以可以使用：

@Select(AuthState.currentUser) user$: Observable<any>;

或者您可以在选择器中使用store.select：

user$: Observable<any> = this.store.select(AuthState.currentUser);

或不包括：

user$: Observable<any> = this.store.select((state) => {
  return {
    email: state.email,
    user_name: state.user_name,
});

然后，在模板中可以使用异步管道：

<div *ngIf="user$ | async; let user">
  <span>{{ user.email }}</span>
  <span>{{ user.user_name }}</span>
</div>

附带注意:由于要返回一个带有电子邮件和user_name (而不是令牌)的对象，以避免使用any，所以必须将其声明为匿名类型：

Observable<{email:string; user_name: string}>

或使用部分：

Observable<Partial<AuthStateModel>>

Answer 2

也许将@Injectable()添加到AuthState类中