HN Explorer

Please Sell Me on Vuex

1 points by LiterallyDoge ↗ HN
I mean this post with the utmost respect for the brilliant minds that brought you Redux. Given that React is a view handler and not a full state controller, it completely makes intuitive sense.

Vuex on the other hand I'm failing to see the use case for, but I feel dirty. I'm coding without it just fine, and everything works great, but I have this nagging sense that I'm doing things wrong, reinforced by the infinite masses of trendy JS articles urging me to join The Church of Framework X.

Can some kind soul out there put into words what makes Vuex awesome and why it was worth it for you to use, given the nature of Vue being so darn good at two-way automagical bind handling?

Thanks for any input.

8 comments

[ 3.0 ms ] story [ 29.6 ms ] thread
anthonygore
Sharing data between components without parent/child relationship is the main reason
cimmanom
Vue won’t let you pass changes in data upwards through the component hierarchy. Once you need to do that (and you need to do that in any non-trivial application), your only options are event passing (which quickly becomes awkward and difficult to reason about - as anyone who’s ever picked up someone else’s large Backbone project will attest) or a dedicated data store. It doesn’t have to be Vuex, but Vuex integrates well and is reasonably easy to work with, so why not?
LiterallyDoge
Interesting - good point! Would having a window.x variable (traditional global) also solve this?
cimmanom
I mean, it might, but there are other reasons why global variables are bad practice -- especially in Javascript. Vuex (in strict mode) enforces that your data is changed only in known and blessed ways.
LiterallyDoge
I haven't seen anything about this in my research other than the obligatory "globals r bad nub do not use dis evr 1337"

Not to say that's wrong, just that I'm lacking on concrete rationale. If you get a few minutes, would you be kind enough to link me to further reading on maybe some of the ways Vuex provides a better approach than traditional globals in singleton namespaces? (Or just post here but I don't want to ask you to explain something that's already well documented)

Thanks for your help either way, really appreciate your time.

cimmanom
Globals make it really difficult to test, reuse, or repurpose code. And you can only ever have one instance of a given global, so if you want multiple instances of your widget you face really ugly refactoring.

If you google for it there should be plenty of good resources on this topic. It sounds like maybe you’re relatively new to programming - it only takes running into this situation once to start to understand the reasons for avoiding them.

They’re especially dangerous in JavaScript because of the way it handles scoping. If you accidentally miss a “var” or “let” inside a function you could find yourself mutating global instead of local data.

Vuex lets you scope your data to a module. It also as I described above lets you limit mutations to a known set of operations, which becomes important in a large or long-lived codebase.