angular - NGXS 3.1.4 存储计算/操作

Question

我正在构建一个 Angular 6 应用程序并试图了解 NGXS (3.1.4)。

我已经设法实现 @Actions 来添加和删除商店中的购物车项目；那些确实有效。

我仍在尝试执行以下操作：

1. 计算 cartItems 的总数并将其显示为 Angular html 组件中的值
2. 清除购物车中的所有购物车项目

解决了

@Action(EmptyCart) emptyCart(ctx: StateContext<CartStateModel>, action: EmptyCart) { 
const state = ctx.getState(); 
const current = { cartItems: [] }; 
ctx.setState({ ...state, ...current }); 
}

3. 如果 id 已存在，则仅更新 cartItems 中 CartItem 的数量
4. 通过计算每个 cartItems 价格 * 数量并将其添加到运行总计以显示在有角度的 html 组件中来计算购物车的总量

我很感激我问了多个问题，但它们与同一个问题有关。

如果有涵盖此类问题的视频或链接，那就太好了。我尝试了 google/youtube 搜索并查看了 NGXS 的 github 文档。

以下是我正在使用的：

export interface CartItem {
  tempID: number;
  id: number;
  name: string;
  price: number;
  quantity: number;

}

export class CartStateModel {
    cartItems: CartItem[];
}

@State<CartStateModel>({
  name: 'cartItems',
  defaults: {
    cartItems: []
  }
})

感谢您的任何反馈:-)

Answer 1

这是我正在使用的一种方法：

function emptyCartState() {
  return {
    cartItems: [],
  }
}

@State<CartStateModel>({
  name: 'cartItems',
  defaults: emptyCartState(),
})

..
..
..
Action(EmptyCart)
emptyCart(ctx: StateContext<CartStateModel>, action: EmptyCart) { 
  return of(ctx.setState(emptyCartState()));
}