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