Pina is modular by default, meaning that your store is meant to be broken up into separate files, or stores, based on the different kinds of state in your application. For instance, a blog might have a file for posts, another for users, and another for comments. If you're familiar with Vuex, you'll remember that Vuex kept all of its state at a single root level by default, and you had to opt in to modules. But that's not the case with Pino.
For our application, we'll end up having a product store and a cart store, and together they make up our global store. So let's start by creating the file for the product store. For organization's sake, I'll create a directory under source called stores. js.
As you can see, There's nothing inherent about this file that makes it a store. It's just a JavaScript file. So, to let you know that this is a Pina store, we need to import define store from Pina. Now define store takes two arguments.
The first is the name or ID of the store. In our case, product store. This name is required. and it's used by Pina to connect the store to the DevTools.
It can be anything you want it to be, but it should be unique across all your stores and easily identifiable when viewing it in the DevTools. I like to name it the same as my file name. That way, it makes it easy to go from the DevTools to the store in the file directory. All right, the next argument is an options object where we'll be able to define our state.
actions, getters, and so on. If these terms are unfamiliar to you right now, don't worry about it. We'll be learning what they mean throughout the next few lessons. Next, we'll need to expose our store by exporting it like so.
It's convention to prefix this export name with the word use. That way, it conforms to the same convention used by view composables. All right, the first thing we'll define on the product store is our state, and it must be defined as a function that returns the initial state. Doing things this way allows Pina to work in both server and client-side environments.
Okay, the syntax makes sense, but what is state, really? Well, the state is the central part of your store. It's the whole reason the store exists to begin with, and it's used for defining data that should be accessible across all the components of your application. This doesn't mean that every file or every component necessarily needs to use that state, but it can if it wants to.
The state has been made available by the store and can be ingested at will. This is opposed to the data defined directly in components that must be emitted as events or passed down as prompts. to be available amongst parent or child components. All right, since we're in the product store, of course, one of the pieces of state that I want to keep up with is the products for our app.
json. So let's import that and set it to the state. And we can actually shorten this further with JavaScript's object property value shorthand. Sweet.
We've just started storing our first bit of data in the state. View, let's import our brand new store. And then we can put it to use by calling the function. Now, if we check out Pina in the DevTools, you can see our product store listed there.
Very nice. On the right hand side is all the state for the product store. And sure enough, products is there. And we can look through them at will.
In the next lesson, let's get the product cards on the page populated from our products in the store.