A basic insight on Vuex and how it can be used inside Vue application. Vuex is a centralised state management plugin for Vue and in this presentation, I am explaining about how it can solve the inconsistency problem for large scale application.

1. Vuex
Centralized state management for Vue application

2. Before Vuex
It was difficult to :
● Keep multiple components on same track.
● Share data in increasing nested components in upward flow.
● Debugging of code was nightmare.
● No mutation in shared data from child
● No abstraction of shared data

3. Flux
● Foundation of Vuex, Redux, etc.
● Its is a pattern, not a library

4. Core principles
1. State
2. Getters
3. Mutations
4. Actions
5. Modules

5. State
● Single source of truth i.e. single instance app wide
● Used for shared data (no local data of component)
● Reactive in nature
● Can’t be updated directly

6. Instantiate Store

7. Using Stores
Parent
Component

8. mapState : Saviour

9. Getters
● Computed properties for store
● Works similarly to computed property in Vue ( watches internally used variables)

10. Using Getters
Defining getter Using in component

11. Mutations
● Simply a string and handler
● Synchronous

12. Using mutation
Defining mutation
Using mutation

13. Using mutations with payload
Using number payload Using object payload

14. Mutations : Why Sync

15. Actions : Async Mutators
● Don’t mutate states directly
● Call ‘commits’ within

16. Using Actions
Defining actions Using action in component

17. Promises in Actions
Defining promises in actions
Using actions

18. Vuex architecture

19. Modules
1. Has own state, mutations, actions, getters, and nested modules.
2. Give option of modular states and global states
3. Required for large applications for maintenance

20. Using modules

21. Accessing root states

22. Thank You