Why use $store in v3? #1659
Replies: 4 comments 9 replies
-
|
To use data between components. Example: A button to open a modal and a seperate modal component: |
Beta Was this translation helpful? Give feedback.
-
|
You'll know when you need it. Until you don't: there is no reason to use it. |
Beta Was this translation helpful? Give feedback.
-
|
So if I was collecting data to submit to server, then I would $store those and possibly model them across multiple components? |
Beta Was this translation helpful? Give feedback.
-
|
$store is more about storing application state and not storing data. State can be local to components, or shared between them. You'll use it when you have to share state. |
Beta Was this translation helpful? Give feedback.
-
|
OK, so continue to keep my "data" as vars in the main x-data function? |
Beta Was this translation helpful? Give feedback.
-
|
Sure. Or use |
Beta Was this translation helpful? Give feedback.
-
|
The way I think about it is if some state is application based (so think context api in react, or mobx or redux or any global state management strategy) you probably want to use Store. If the state is isolated to small component tree, (or even isolated to one page) you probably want to use component state (isolate the state locally, think useState in react). There are probably some general rules about what feels right/wrong to you. If you're worried about performance of nesting everything under x-data, maybe go with Store. If you're worried about variable/functions getting shadowed by children components, maybe use Store. Patterns should show themselves pretty quick. |
Beta Was this translation helpful? Give feedback.
-
|
What everyone else said, but I'll add this: TL;DR: Prefer using stores for global data instead of adding a root x-data to a page for a little performance boost: Before (without $store) <body x-data="{ showSomething: ... }">
...
<div x-show="showSomething">...</div>
...
</body>The above example is fine, but Alpine will initialize the entire tag looking for Alpine syntax to initialize. The below example is more efficient and will result in a slightly faster boot time if the contents of are large: After (with $store) <body>
...
<div x-data x-show="$store.showSomething">...</div>
...
</body> |
Beta Was this translation helpful? Give feedback.
-
|
Thanks Caleb. One more question and I think I got it. Can I use $store objects with x-model so the value syncs up if changed anywhere ( via inputs ) ? If so, then how would that look , like this? <input x-model="$store.someData" > |
Beta Was this translation helpful? Give feedback.
-
|
@yabdab Yeah, you can use that syntax for |
Beta Was this translation helpful? Give feedback.
-
|
Is the store in memory? It is confusing because, there is local storage and session storage. Both are storage and can be seen in the Application tab in inspect. But Alpine store is not visible in the developer tool. |
Beta Was this translation helpful? Give feedback.
-
|
The store is in Memory. Alpine Store is the same as most applications stores. They are a place to store globally available information, it is not storage. |
Beta Was this translation helpful? Give feedback.
-
|
Well, because you shouldn't have a Your components should only be as big as they should be. If you have a single data wrapping everything, that should probably just be a store. x-data is used for initializing components and scoping data. If the data is global, make it in a store. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
I feel like I might know the answer to this, but wanted to ask for better understanding ( and maybe help others out ).
I do not come from Vue or React ... coming directly yo Alpine 😉
Why would I use store in my one page app?
Is it better than just including all those values in the main x-data function?
Can I still use x-model with store items?
Would store be a good place to "store" user settings for the app?
Thanks for any feedback that is given to myself and possibly others that come across this thread 😁
Beta Was this translation helpful? Give feedback.
All reactions