somascope
9/6/2018 - 9:39 PM

Vuex Notes

Vuex uses the Flux pattern to give you data stores in Vue.

Vuex uses a single state tree: single object contains all your app state.
 - You have only one store per application
 - You can divide a store into modules (each containing its own state, mutations, actions, getters)

Vuex is a library that helps you implement the Flux architecture in your app
 - Implements a store & custom mutators
 - It will reactively update any components that are reading data from the store
 
It allows for
 - Hot module reloading (updating modules in a running app)
 - Time travel debugging (stepping back through mutations to trace bugs)

Global access to store
 - From all components
 - Typically: this.$store.

Accessing state directly:
this.$store.state.someProperty

Accessing state via getter:
The store can be injected into all child components of the root and 
will be available on them as this.$store

Mutations are required to change data
 - Changes to data values to be performed through mutations rather than by assigning a new value directly
 - Following this pattern provides some useful features, such as the ability to track changes and
undo/redo them using the Vue Devtools browser plugin