471
358
+ 1
0

What is vuex?

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue's official devtools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.
vuex is a tool in the State Management Library category of a tech stack.
vuex is an open source tool with 22.3K GitHub stars and 7.4K GitHub forks. Here’s a link to vuex's open source repository on GitHub

Who uses vuex?

Companies
96 companies reportedly use vuex in their tech stacks, including InstaGIS, Flat, and Cromon Media Services.

Developers
359 developers on StackShare have stated that they use vuex.

vuex Integrations

Why developers like vuex?

Here’s a list of reasons why companies and developers use vuex
Top Reasons
Be the first to leave a pro
vuex Reviews

Here are some stack decisions, common use cases and reviews by companies and developers who chose vuex in their tech stack.

Tim Nolet
Tim Nolet
Founder, Engineer & Dishwasher at Checkly · | 19 upvotes · 284.7K views
atChecklyHQChecklyHQ
Heroku
Heroku
Docker
Docker
GitHub
GitHub
Node.js
Node.js
hapi
hapi
Vue.js
Vue.js
AWS Lambda
AWS Lambda
Amazon S3
Amazon S3
PostgreSQL
PostgreSQL
Knex.js
Knex.js
vuex
vuex

Heroku Docker GitHub Node.js hapi Vue.js AWS Lambda Amazon S3 PostgreSQL Knex.js Checkly is a fairly young company and we're still working hard to find the correct mix of product features, price and audience.

We are focussed on tech B2B, but I always wanted to serve solo developers too. So I decided to make a $7 plan.

Why $7? Simply put, it seems to be a sweet spot for tech companies: Heroku, Docker, Github, Appoptics (Librato) all offer $7 plans. They must have done a ton of research into this, so why not piggy back that and try it out.

Enough biz talk, onto tech. The challenges were:

  • Slice of a portion of the functionality so a $7 plan is still profitable. We call this the "plan limits"
  • Update API and back end services to handle and enforce plan limits.
  • Update the UI to kindly state plan limits are in effect on some part of the UI.
  • Update the pricing page to reflect all changes.
  • Keep the actual processing backend, storage and API's as untouched as possible.

In essence, we went from strictly volume based pricing to value based pricing. Here come the technical steps & decisions we made to get there.

  1. We updated our PostgreSQL schema so plans now have an array of "features". These are string constants that represent feature toggles.
  2. The Vue.js frontend reads these from the vuex store on login.
  3. Based on these values, the UI has simple v-if statements to either just show the feature or show a friendly "please upgrade" button.
  4. The hapi API has a hook on each relevant API endpoint that checks whether a user's plan has the feature enabled, or not.

Side note: We offer 10 SMS messages per month on the developer plan. However, we were not actually counting how many people were sending. We had to update our alerting daemon (that runs on Heroku and triggers SMS messages via AWS SNS) to actually bump a counter.

What we build is basically feature-toggling based on plan features. It is very extensible for future additions. Our scheduling and storage backend that actually runs users' monitoring requests (AWS Lambda) and stores the results (S3 and Postgres) has no knowledge of all of this and remained unchanged.

Hope this helps anyone building out their SaaS and is in a similar situation.

See more
Ali Soueidan
Ali Soueidan
Creative Web Developer at Ali Soueidan · | 16 upvotes · 134.5K views
npm
npm
Vue.js
Vue.js
vuex
vuex
JavaScript
JavaScript
Pug
Pug
Sass
Sass
JSON
JSON
Git
Git
GitHub
GitHub
ES6
ES6
Asana
Asana
Adobe Illustrator
Adobe Illustrator
PHP
PHP
Babel
Babel

Application and Data: Since my personal website ( https://alisoueidan.com ) is a SPA I've chosen to use Vue.js, as a framework to create it. After a short skeptical phase I immediately felt in love with the single file component concept! I also used vuex for state management, which makes working with several components, which are communicating with each other even more fun and convenient to use. Of course, using Vue requires using JavaScript as well, since it is the basis of it.

For markup and style, I used Pug and Sass, since they’re the perfect match to me. I love the clean and strict syntax of both of them and even more that their structure is almost similar. Also, both of them come with an expanded functionality such as mixins, loops and so on related to their “siblings” (HTML and CSS). Both of them require nesting and prevent untidy code, which can be a huge advantage when working in teams. I used JSON to store data (since the data quantity on my website is moderate) – JSON works also good in combo with Pug, using for loops, based on the JSON Objects for example.

To send my contact form I used PHP, since sending emails using PHP is still relatively convenient, simple and easy done.

DevOps: Of course, I used Git to do my version management (which I even do in smaller projects like my website just have an additional backup of my code). On top of that I used GitHub since it now supports private repository for free accounts (which I am using for my own). I use Babel to use ES6 functionality such as arrow functions and so on, and still don’t losing cross browser compatibility.

Side note: I used npm for package management. 🎉

*Business Tools: * I use Asana to organize my project. This is a big advantage to me, even if I work alone, since “private” projects can get interrupted for some time. By using Asana I still know (even after month of not touching a project) what I’ve done, on which task I was at last working on and what still is to do. Working in Teams (for enterprise I’d take on Jira instead) of course Asana is a Tool which I really love to use as well. All the graphics on my website are SVG which I have created with Adobe Illustrator and adjusted within the SVG code or by using JavaScript or CSS (SASS).

See more
Eli Hooten
Eli Hooten
CTO at Codecov · | 16 upvotes · 47.7K views
atCodecovCodecov
Vue.js
Vue.js
Python
Python
vuex
vuex
Jest
Jest

We chose Vue.js at Codecov to replace a front end that was based mostly on server side rendered Python templates, and was getting fairly long in the tooth. The move to Vue.js allowed us to take a more component driven approach to our front end, providing greater flexibility and reuse when creating new pages and refactoring old ones. Another bonus was how easily we could integrate Axios with VueJS for making AJAX calls within Vue.js components and their associated vuex stores. We were also able to easily integrate Vue.js with the Jest testing framework, which allowed to provide test coverage for a front end where none previously existed.

The move to Vue.js has allowed us to be more agile in our front end development by further decoupling our front end from our back end. Additionally, by fully embracing a component-driven approach, we're able to more easily isolate and test functionality, leading to a more readible, maintainable, and extensible front end codebase.

See more
John Datserakis
John Datserakis
Vue.js
Vue.js
vuex
vuex

For the frontend of https://www.rsvpkeeper.com I went with Vue.js.

I've been using Vue for about 4 years now and it's been awesome. The reactivity, easy to grok structure, the speed, and the ease-of-use - it's just fun to work with.

And for a large app - vuex comes in clutch. Back in the day I built a few apps completely in jQuery - jeez just thinking about it makes me sweat. It was no fun dealing with "state" back then - now it's a dream with vuex getters, actions, and mutations.

These days - it's a no-brainer which frontend framework I'm going to use - Vue all day baby!

See more
Paul Whittemore
Paul Whittemore
Developer and Owner at Appurist Software · | 15 upvotes · 119.4K views
Fastify
Fastify
ExpressJS
ExpressJS
Node.js
Node.js
Vuetify
Vuetify
Quasar Framework
Quasar Framework
Vue.js
Vue.js
vuex
vuex
Electron
Electron
Fastly
Fastly

I'm building most projects using: Server: either Fastify (all projects going forward) or ExpressJS on Node.js (existing, previously) on the server side, and Client app: either Vuetify (currently) or Quasar Framework (going forward) on Vue.js with vuex on Electron for the UI to deliver both web-based and desktop applications for multiple platforms.

The direct support for Android and iOS in Quasar Framework will make it my go-to client UI platform for any new client-side or web work. On the server, I'll probably use Fastly for all my server work, unless I get into Go more in the future.

Update: The mobile support in Quasar is not a sufficiently compelling reason to move me from Vuetify. I have decided to stick with Vuetify for a UI for Vue, as it is richer in components and enables a really great-looking professional result. For mobile platforms, I will just use Cordova to wrap the Vue+Vuetify app for mobile, and Electron to wrap it for desktop platforms.

See more
Tim Nolet
Tim Nolet
Founder, Engineer & Dishwasher at Checkly · | 13 upvotes · 17.4K views
atChecklyHQChecklyHQ
Vue.js
Vue.js
JavaScript
JavaScript
vuex
vuex

Vue.js JavaScript vuex

If you run a SaaS, you probably want to show your users when they are almost running out of widgets. Or that they can get some cool feature on a more expensive plan.

Or, in other words, how can you be nice and commercial in dealing with plan limits?

We use Vue.js with Vuex for our front end, but the patterns and code examples here can be applied to any other SPA framework.

We implemented some very specific data structures in Vuex to make it easy for components to check what a user's status is with regard to plan limits and usage. This centralizes and encapsulates the knowledge about typical SaaS things in one place and leverages Vue's component system nicely. Read more in the dedicated blog post.

See more

vuex Alternatives & Comparisons

What are some alternatives to vuex?
Flux
Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.
RxJS
RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code. This project is a rewrite of Reactive-Extensions/RxJS with better performance, better modularity, better debuggable call stacks, while staying mostly backwards compatible, with some breaking changes that reduce the API surface.
MobX
MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP). React and MobX together are a powerful combination. React renders the application state by providing mechanisms to translate it into a tree of renderable components. MobX provides the mechanism to store and update the application state that React then uses.
Redux
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. t provides a great experience, such as live code editing combined with a time traveling debugger.
redux-saga
An alternative side effect model for Redux apps
See all alternatives

vuex's Followers
358 developers follow vuex to keep up with related blogs and decisions.
Ragavan Rajan
vezselin
jolzee
Michael Meierhoff
Elena Makarenko
Terje Solem
Mohammed Azzam
Hany Taha
Mohamed Hassan
Mohammed Ayman