问我如何坚持使用简单的方法来保存本地存储？

EN

    import { createStore, action } from 'easy-peasy';

    const store = createStore({
    cartItems: JSON.parse(localStorage.getItem('cartItems')) ?? [],
    addToCart: action((state, payload) => {
    return {
    ...state,
    cartItems: [...state.cartItems, payload],
   };
   }),
   });

   export default store;

   import { collection, addDoc, getDocs } from 'firebase/firestore';
   import { db } from '../../firebase/config';
   import { products } from '../../figsofeden-products';
   import { Card, Row, Container, Col } from 'react-bootstrap';
   import { Link, useNavigate } from 'react-router-dom';
   import { useState, useEffect } from 'react';
   import { useStoreActions, useStore } from 'easy-peasy';

 const Home = () => {
 const [products, setProducts] = useState([]);
 const navigate = useNavigate();

 useEffect(() => {
 getData();
 }, []);

async function getData() {
try {
  const products = await getDocs(collection(db, 'products'));
  const productsArray = [];
  products.forEach((doc) => {
   
    const obj = {
      id: doc.id,
      ...doc.data(),
    };

    productsArray.push(obj);
  });

  setProducts(productsArray);
} catch (error) {
  console.log(error);
  }
 }

const addToCart = useStoreActions((actions) => actions.addToCart);

return (
<Layout>
  <Container fluid className="product-directory mx-auto">
    <Row xs={1} md={2} lg={3} className="g-2">
      {products.map((product, index) => {
        return (
          <Col key={product.id} className="g-2">
            <Card>
              <div className="product-wrapper position-relative">
                <div className="product-content">
                  <Card.Img
                    variant="top"
                    src={product.imageURL}
                    alt="img"
                  />
                  <Card.Body>
                    <Card.Text>{product.name}</Card.Text>
                    <Card.Text>NGN {product.price}</Card.Text>
                  </Card.Body>
                </div>
                <div className="product-actions">
                  <h3> NGN {product.price}</h3>
                  <div className="d-flex">
                    <button
                      className="mx-2"
                      disabled={product.quantity === 0 ? 'true' : ''}
                      onClick={() => addToCart(product)}
                    >
                      ADD TO CART
                    </button>
                    <button
                      onClick={() => {
                        navigate(`/productinfo/${product.id}`);
                      }}
                    >
                      VIEW
                    </button>
                  </div>
                  <div className="outofstock">
                    <p>
                      <em>{product.quantity > 0 ? '' : 'Out Of Stock'}</em>
                    </p>
                  </div>
                </div>
              </div>
            </Card>
          </Col>
        );
      })}
    </Row>
  </Container>
 </Layout>
  );
 };

export default Home;