As mentioned in the last lesson, in a real life application, your data would probably come from an API. Because of that, products would typically be empty to begin with, and then you'd create some kind of action to fill it. Let's see what that looks like. To define an action in Pina, we can provide an actions option to the store and then define methods on it.
Actions in your store are synonymous with methods for your component. except that they are meant to mutate your store's data instead of a component's local data. All right, let's create an action called fill. Now, I want to set the products in our state to the products from the JSON file.
We can access the state from an action via the this keyword and then directly specify a piece of state. products to the products from our JSON file. Sweet. Now, if I save the file and then go give the browser a refresh, you can see that we've lost the products on the page.
The reason they're gone is because we need to call fill to initiate the filling of our product store. view, we can do just that. fill. And just like that, our page is working again.
Awesome. This is a typical pattern for view powered sites. You'll have some data in an API, some empty global state in your store, and then on the page where the data is needed, you'll call some action to fill that state. All right, to make this even more realistic, let's get the data asynchronously instead of synchronously.
To do that, I'll change the action to an async action. Then, I'll await a dynamic import of the JSON instead of the static import. default property, as the dynamic import returns the JSON under a key of default. And of course, that means I can remove the static import.
Now when I save, if I go and refresh the page, nice, everything is still working great. And now our product store is emulating how a typical project would get its data. that is asynchronously. The only difference is that we're getting it via a dynamic import instead of using something like fetch or Axios to get it from a REST API.