绑定到NGXS状态：此行为是否符合预期？

这个现象确实是预期行为，但它其实是因为你违反了NGXS状态管理的核心原则——不可变性所导致的，接下来我会详细解释原因并给出正确的实现方式：

为什么会出现这个现象？ #

NGXS的状态对象本质上是JavaScript的引用类型（数组、对象），当你在模板中使用[(ngModel)]="item.name"进行双向绑定时，你其实是在原地直接修改了状态数组里的对象属性。由于组件订阅的是状态对象的引用，一旦引用指向的对象发生变化，所有订阅该状态的视图（包括你的“仅查看”列表）都会同步更新。

NGXS在默认情况下并不会阻止这种直接修改（除非开启严格模式），因为JavaScript本身允许对引用类型的属性进行原地修改，所以这完全是JS语言特性带来的预期结果，但这并不是NGXS推荐的使用方式。

为什么不推荐直接修改状态？ #

状态管理库（比如NGXS、NgRx）的核心设计理念之一就是状态变化可追踪、可预测：

• 所有状态修改都通过分发Action来完成，这样可以利用NGXS的中间件、日志记录、时间旅行调试等功能追踪每一次状态变化；
• 直接修改状态会绕过这些机制，导致状态变化不可控，后期排查bug时很难追溯到修改的源头；
• 违反不可变性原则还可能导致变更检测异常，因为NGXS依赖状态的引用变化来通知订阅者更新。

正确的实现方式 #

按照NGXS的最佳实践，所有状态修改都应该通过分发Action来完成，具体步骤如下：

1. 创建UpdateItem Action #

export class UpdateItem {
  static readonly type = '[App] Update Item';
  constructor(public id: number, public newName: string) {}
}

2. 在AppState中处理UpdateItem Action #

注意要保持状态的不可变性，通过创建新数组/新对象来修改状态，而不是原地修改：

@Action(UpdateItem)
updateItem(ctx: StateContext<AppStateModel>, action: UpdateItem) {
  const state = ctx.getState();
  // 遍历数组，找到目标项并返回新对象，其他项保持不变
  ctx.patchState({
    items: state.items.map(item => 
      item.id === action.id ? { ...item, name: action.newName } : item
    )
  });
}

3. 修改组件模板和方法 #

使用单向绑定[ngModel]，并通过ngModelChange事件触发Action：

<div *ngFor="let item of app.items">
  Update Name: <input [ngModel]="item.name" (ngModelChange)="updateItem(item.id, $event)" />
</div>

组件中的方法：

updateItem(id: number, newName: string) {
  this.store.dispatch(new UpdateItem(id, newName));
}

额外建议：开启严格模式（NGXS v4+） #

如果你使用的是NGXS v4及以上版本，可以在模块配置中开启strictMode，它会冻结状态对象，阻止任何原地修改操作，一旦你不小心直接修改状态，就会抛出错误，帮助你更早发现问题：

@NgModule({
  imports: [
    NgxsModule.forRoot([AppState], {
      strictMode: true
    })
  ]
})
export class AppModule {}

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