Wednesday, 8 February, 2017 UTC
Summary
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.
Vuex 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.
Rundown
- Actively Developed: Yes
- Popularity: ~5,000 stars
- Primary Developer: Evan You (Vue lead developer)
- Documentation Quality: Thorough
- Immutability: Development: No, Production: Warning
- Single State Object: Yes
- Modular State Tree: Yes
- Asynchronous Mutations: Yes (through Actions)
- Repository: https://github.com/vuejs/vuex
Pros
- Relatively simple API.
- Clear documentation and examples.
- Support for asynchronous actions.
- Solid development outlook, likely to remain active.
Cons
- Requires you to define getters for every slice of state you intend to access.
- Requires odd computed property and method injection patterns in your components that can seem like code smells.
- Occasionally seems like magic, it’s not always clear how definitions map to usage.
Conclusion (TL;DR)
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.
Revue
Redux devs, never fear! There’s a great way you can integrate Vue directly with Redux: Revue.
Rundown
- Actively Developed: Yes
- Popularity: ~400 stars
- Primary Developer: EGOIST
- Documentation Quality: Basic (Use Redux documentation)
- Immutability: No, requires additional library.
- Single State Object: Yes
- Modular State Tree: Yes (via Reducer combination)
- Asynchronous Mutations: No (Achieved by using multiple actions and state variables)
- Repository: https://github.com/revue/revue
Pros
- Lightweight wrapper around Redux, allows you to use Redux as you’re used to.
Cons
- Redux can be a pain to work with if you’re not familiar with it.
- Considerably more verbose than Vuex or vue-stash.
- No long-term development guarantee.
Conclusion (TL;DR)
If you’re coming from a React background and you’re in love with Redux, go with Revue. If you’re just starting with Vue, you might want to try vue-stash, below instead.
vue-stash
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.
Rundown
- Actively Developed: Yes
- Popularity: ~100 stars
- Primary Developer: Cody Mercer
- Documentation Quality: Basic
- Immutability: No
- Single State Object: Yes
- Modular State Tree: N/A (State tree is a plain JS object)
- Asynchronous Mutations: No (direct property mutation)
- Repository: https://github.com/cklmercer/vue-stash
Pros
- Crazy simple. It’s really just an object that you inject globally into your components.
Cons
- Not immutable.
- No action / mutation abstraction. You simply access and modify properties as you normally would.
- No long-term development guarantee.
Conclusion (TL;DR)
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
vue-freeze 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.
Rundown
- Actively Developed: No Very slow update cycle
- Popularity: ~100 stars
- Primary Developer: Naufal Rabbani
- Documentation Quality: Basic
- Immutability: Yes (Provided by Freezer)
- Single State Object: Yes
- Modular State Tree: No (Actions are all on the root tree, but can be manually namespaced)
- Asynchronous Mutations: Yes, by default
- Repository: https://github.com/BosNaufal/vue-freeze
Pros
- Easy to learn API, especially if you’re familiar with Freezer already.
- Provides immutability by default.
Cons
- Not immutable.
- No action / mutation abstraction. You simply access and modify properties as you normally would.
- No long-term development guarantee.
Conclusion (TL;DR)
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.