Skip to content

Commit 993be94

Browse files
w3bdesignw3bdesign
committed
Implement persisted state
1 parent 1cb1b91 commit 993be94

File tree

1 file changed

+127
-118
lines changed

1 file changed

+127
-118
lines changed

‎store/useCart.js

Lines changed: 127 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -6,135 +6,144 @@ import ADD_TO_CART_MUTATION from "@/apollo/mutations/ADD_TO_CART_MUTATION.gql";
66
import UPDATE_CART_MUTATION from "@/apollo/mutations/UPDATE_CART_MUTATION.gql";
77
import GET_CART_QUERY from "@/apollo/queries/GET_CART_QUERY.gql";
88

9-
export const useCart = defineStore("cartState", () => {
10-
const cart = ref([]);
11-
const loading = ref(false);
12-
const error = ref(null);
13-
const cartTotals = ref({});
9+
export const useCart = defineStore(
10+
"cartState",
11+
() => {
12+
const cart = ref([]);
13+
const loading = ref(false);
14+
const error = ref(null);
15+
const cartTotals = ref({});
1416

15-
const {
16-
result: cartResult,
17-
loading: cartLoading,
18-
refetch: refetchCart,
19-
} = useQuery(GET_CART_QUERY, null, { fetchPolicy: "network-only" });
17+
const {
18+
result: cartResult,
19+
loading: cartLoading,
20+
refetch: refetchCart,
21+
} = useQuery(GET_CART_QUERY, null, { fetchPolicy: "network-only" });
2022

21-
watch(cartResult, (newCartResult) => {
22-
if (newCartResult && newCartResult.cart) {
23-
updateCartState(newCartResult.cart);
24-
}
25-
});
23+
watch(cartResult, (newCartResult) => {
24+
if (newCartResult && newCartResult.cart) {
25+
updateCartState(newCartResult.cart);
26+
}
27+
});
2628

27-
const updateCartState = (newCart) => {
28-
cart.value = newCart.contents.nodes.map((item) => ({
29-
key: item.key,
30-
product: item.product.node,
31-
variation: item.variation ? item.variation.node : null,
32-
quantity: item.quantity,
33-
total: item.total,
34-
subtotal: item.subtotal,
35-
subtotalTax: item.subtotalTax,
36-
}));
29+
const updateCartState = (newCart) => {
30+
cart.value = newCart.contents.nodes.map((item) => ({
31+
key: item.key,
32+
product: item.product.node,
33+
variation: item.variation ? item.variation.node : null,
34+
quantity: item.quantity,
35+
total: item.total,
36+
subtotal: item.subtotal,
37+
subtotalTax: item.subtotalTax,
38+
}));
3739

38-
cartTotals.value = {
39-
subtotal: newCart.subtotal,
40-
subtotalTax: newCart.subtotalTax,
41-
shippingTax: newCart.shippingTax,
42-
shippingTotal: newCart.shippingTotal,
43-
total: newCart.total,
44-
totalTax: newCart.totalTax,
45-
feeTax: newCart.feeTax,
46-
feeTotal: newCart.feeTotal,
47-
discountTax: newCart.discountTax,
48-
discountTotal: newCart.discountTotal,
40+
cartTotals.value = {
41+
subtotal: newCart.subtotal,
42+
subtotalTax: newCart.subtotalTax,
43+
shippingTax: newCart.shippingTax,
44+
shippingTotal: newCart.shippingTotal,
45+
total: newCart.total,
46+
totalTax: newCart.totalTax,
47+
feeTax: newCart.feeTax,
48+
feeTotal: newCart.feeTotal,
49+
discountTax: newCart.discountTax,
50+
discountTotal: newCart.discountTotal,
51+
};
4952
};
50-
};
5153

52-
const addToCart = async (product, quantity = 1) => {
53-
loading.value = true;
54-
error.value = null;
55-
try {
56-
const { mutate } = useMutation(ADD_TO_CART_MUTATION);
57-
await mutate({
58-
input: {
59-
productId: product.databaseId,
60-
quantity: quantity,
61-
},
62-
});
63-
await refetchCart();
64-
} catch (err) {
65-
} finally {
66-
loading.value = false;
67-
}
68-
};
54+
const addToCart = async (product, quantity = 1) => {
55+
loading.value = true;
56+
error.value = null;
57+
try {
58+
const { mutate } = useMutation(ADD_TO_CART_MUTATION);
59+
await mutate({
60+
input: {
61+
productId: product.databaseId,
62+
quantity: quantity,
63+
},
64+
});
65+
await refetchCart();
66+
} catch (err) {
67+
} finally {
68+
loading.value = false;
69+
}
70+
};
6971

70-
const updateCartItemQuantity = async (key, quantity) => {
71-
loading.value = true;
72-
error.value = null;
73-
try {
74-
const { mutate } = useMutation(UPDATE_CART_MUTATION);
75-
await mutate({
76-
input: {
77-
items: [{ key, quantity }],
78-
},
79-
});
80-
await refetchCart();
81-
} catch (err) {
82-
await refetchCart();
83-
} finally {
84-
loading.value = false;
85-
}
86-
};
72+
const updateCartItemQuantity = async (key, quantity) => {
73+
loading.value = true;
74+
error.value = null;
75+
try {
76+
const { mutate } = useMutation(UPDATE_CART_MUTATION);
77+
await mutate({
78+
input: {
79+
items: [{ key, quantity }],
80+
},
81+
});
82+
await refetchCart();
83+
} catch (err) {
84+
await refetchCart();
85+
} finally {
86+
loading.value = false;
87+
}
88+
};
8789

88-
const removeProductFromCart = async (key) => {
89-
loading.value = true;
90-
error.value = null;
91-
try {
92-
await updateCartItemQuantity(key, 0);
93-
} catch (err) {
94-
} finally {
95-
loading.value = false;
96-
await refetchCart();
97-
}
98-
};
90+
const removeProductFromCart = async (key) => {
91+
loading.value = true;
92+
error.value = null;
93+
try {
94+
await updateCartItemQuantity(key, 0);
95+
} catch (err) {
96+
} finally {
97+
loading.value = false;
98+
await refetchCart();
99+
}
100+
};
99101

100-
const clearCart = async () => {
101-
loading.value = true;
102-
error.value = null;
103-
try {
104-
for (const item of cart.value) {
105-
await removeProductFromCart(item.key);
102+
const clearCart = async () => {
103+
loading.value = true;
104+
error.value = null;
105+
try {
106+
for (const item of cart.value) {
107+
await removeProductFromCart(item.key);
108+
}
109+
} catch (err) {
110+
} finally {
111+
loading.value = false;
112+
await refetchCart();
106113
}
107-
} catch (err) {
108-
} finally {
109-
loading.value = false;
110-
await refetchCart();
111-
}
112-
};
114+
};
113115

114-
const cartQuantity = computed(() => {
115-
return cart.value.reduce((total, item) => total + item.quantity, 0);
116-
});
116+
const cartQuantity = computed(() => {
117+
return cart.value.reduce((total, item) => total + item.quantity, 0);
118+
});
117119

118-
const cartSubtotal = computed(() => {
119-
return cartTotals.value.subtotal || "0";
120-
});
120+
const cartSubtotal = computed(() => {
121+
return cartTotals.value.subtotal || "0";
122+
});
121123

122-
const cartTotal = computed(() => {
123-
return cartTotals.value.total || "0";
124-
});
124+
const cartTotal = computed(() => {
125+
return cartTotals.value.total || "0";
126+
});
125127

126-
return {
127-
cart,
128-
loading,
129-
error,
130-
cartTotals,
131-
addToCart,
132-
updateCartItemQuantity,
133-
removeProductFromCart,
134-
clearCart,
135-
cartQuantity,
136-
cartSubtotal,
137-
cartTotal,
138-
refetch: refetchCart,
139-
};
140-
});
128+
return {
129+
cart,
130+
loading,
131+
error,
132+
cartTotals,
133+
addToCart,
134+
updateCartItemQuantity,
135+
removeProductFromCart,
136+
clearCart,
137+
cartQuantity,
138+
cartSubtotal,
139+
cartTotal,
140+
refetch: refetchCart,
141+
};
142+
},
143+
{
144+
persist: {
145+
storage: piniaPluginPersistedstate.localStorage,
146+
paths: ["cart", "cartTotals"],
147+
},
148+
}
149+
);

0 commit comments

Comments
 (0)