Roundup: Vue.js State Management Libraries

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: No
• 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, consider 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 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)

Rundown

• Actively Developed: No Very slow update cycle
• Popularity: ~100 stars
• Primary Developer: Naufal Rabbani
• Documentation Quality: Poor
• 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

• All actions are asynchronous.
• Very little documentation.
• 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.