view, we're getting the products directly from the JSON file, and then looping over them to display each of the product cards. In a real-life application, though, this data would probably come from an API, after which you'd store it in your Pina store. So, let's use the products from our store then instead of from the JSON file to populate the cards. First, I'll remove the import of the JSON file, then Let's define the return of use product store as product store.
Lastly, I'll just replace products in our loop with product store dot products. Nice. Over in the browser, nothing has changed. All the products are still displaying exactly as they should be.
If we open up the DevTools and let's say make a change to the first product's name here, you'll see that update reflected on the page. So just like with local component data, the data in the store is also bound two ways and will always sync properly. Awesome. Back in the code, let's explore another way we can work with the state.
Instead of accessing the whole product store here, we could instead destructure products out of it. But to ensure the state remains reactive when destructuring it, we must use the store to refs function. provided by Pina. After that, we can simplify our v4 loop to just use products.
Nice. After saving, you can see over on the right hand side that everything is still working great. Using store to refs creates refs for any reactive property in the Pina store state. And it's useful when you're only using state from the store, but not calling any actions.
view in the next lesson. So let's just change things back to the way they were before. I'll command Z a few times and get back to using product store.