1. Overview of Vuex
  2. The Store
  3. Modules
  4. State, Getters, Actions, Mutations


_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 (opens new window) _to provide advanced features such as zero-config time-travel debugging and state snapshot export / import. — _ Vuex Docs

I’ll be referencing a Rate Your Landlord App as with the rest of this series. You can check out the repo here. Don’t freak out — there’s a lot of screenshots, but it’s not a crazy-long read! Unlike the Redux devtool, the Vue devtool doesn’t require crazy configurations or boilerplate to use its Vuex features: it just works.


You can’t perform that action at this time. You signed in with another tab or window. You signed out in another tab or…



While you can of course set up your file structure any way you want in any environment if you’re the boss — there are some conventions followed by React with regards to using Redux as a state management tool. For example folks often separate their actions and reducers into separate directories and files. Here’s what my store-oriented file structure looks like for the React version of my app.

// React
├── actions
│   ├── landlords.actions.js
│   ├── properties.actions.js
│   └── reviews.actions.js
├── assets
├── components
├── containers
├── reducers
│   ├── index.js
│   ├── landlords.reducer.js
│   ├── properties.reducer.js
│   └── reviews.reducer.js
└── utils

#vue #api #javascript #vuex

How to Convert a React App to Vue.js
1.40 GEEK