NGXS 3.1.4 存储计算/运算

Question

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

我已经设法实现了@Actions，以从商店中添加和删除购物车项目; 这些实际上有效。

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

1. 计算购物车物品的总数，并将其显示为 一个角度的 HTML 组件
2. 清除所有购物车中的商品

解决

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

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

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

如果有视频或链接涵盖此类问题，那就太好了。 我尝试过谷歌/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()));
}