Using PersistedState to store array of shopping car products but its not storing

[hmiiro]

### Trying to use PersistedState as below but my values dont get persisted

export class CartState {
	cartOpen = $state(false);

	cartProducts = new PersistedState<CartProduct[]>('CART_PRODUCTS', [], {
		storage: 'session',
		serializer: {
			serialize: superjson.stringify,
			deserialize: superjson.parse
		}
	});

	cartStats = $derived.by(() => {
		let quantity = 0;
		let total = 0;
		for (const product of this.cartProducts.current) {
			quantity += product.quantity;
			total += product.product.price * product.quantity;
		}
		return {
			quantity,
			total
		};
	});

	qualifiesForFreeShipping = $derived(this.cartStats.total >= 50);

	freeShippingAlertCount = 0;

	addToCart(cartProduct: CartProduct) {
		// check if product already exists and increase qty
		const exists = this.cartProducts.current.find((product) => product.id === cartProduct.id);
		if (exists) {
			exists.quantity++;
		} else {
			// if not, add the new product
			this.cartProducts.current.push(cartProduct);
		}
	}

	removeFromCart(id: string) {
		this.cartProducts.current = this.cartProducts.current.filter((product) => product.id !== id);
	}
}

[slinso]

You can not just use .push() to append to the array.

this.cartProducts.current.push(cartProduct);

has to become

this.cartProducts.current = [...this.cartProducts.current, cartProduct]

I think the reason is, that current is a store and a not a $state rune for which more fine grained reactivity was implemented.