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

Introduction

_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.

d-otis/rate-your-landlord-vue

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

github.com

React/Redux

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
src
├── 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