By Joshua Bemenderfer
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
State management has been a hot topic in the rapidly changing front-end web development world for a couple years now. For good reason. Maintaining consistent state is often more difficult that one would expect, but is absolutely crucial.
Thankfully there are plenty of libraries to handle this. React has Redux and MobX, Angular has ngrx and Redux ports, but what does Vue have? Well, here’s a run down of the various state management libraries available for Vue and their pros and cons.
It would be absolutely criminal to talk about Vue state management and not mention Vuex. Vuex is Vue’s official state management plugin. It implements the Flux pattern with a simple and easy to use API.
Vuex is solid and active, and quite a decent library to work with. If you’re developing an application a lot of people will depend on, go with Vuex. It’s probably overkill for small projects and might end up frustrating you if you don’t understand it right away, though the documentation helps quite a bit.
Redux devs, never fear! There’s a great way you can integrate Vue directly with Redux: Revue.
Unfortunately the Revue project is no longer maintained.
If you’re coming from a React background and you’re in love with Redux, consider Revue. If you’re just starting with Vue, you might want to try vue-stash, below instead.
vue-stash is about as basic of a state management plugin as you can get. It’s really just a way to inject a reactive object into your component tree globally. This makes it incredibly easy to get started with, but doesn’t provide you with more advanced niceties, such as an immutable state tree.
If you want the absolute minimum API surface possible, and the least amount of work to set it up, and don’t have a lot of long-term requirements vue-stash is for you.
vue-freeze also has a very simple API, providing only states and actions. All actions are asynchronous, and all state properties are immutable. (Immutability provided by Freezer.js)
If immutability is absolutely a requirement for your project, you’re okay with a set API surface, and you like the flexibility Freezer provides you, then you might choose to go with Vue Freeze
Hopefully this has helped inform your decision on which Vue state management library to use. In most projects, you’ll probably want to stick with Vuex, but it’s good to know what else is out there.
If there’s anything you think is missing or should be added, we’d love to hear from you.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.