The motive of this PPT session is to mainly focus on the findings of the following questions: 1)What is Vuex? 2)Why do we need to use it? 3)How do we implement it? The Vue JS becomes an indispensable front end framework nowadays due to its powerful features along with the easy code usage for the developers. Today Vuex- the state management pattern is about to be discussed with the VueJS

1. Lets vue(view) Vuex from
the Top Vue(View)

2. 1)What is Vuex????
2)Why do we need to use it?
3)How do we implement it?

3. 1)What is Vuex????

4. 1)What is Vuex????
“State management pattern + library”

5. ● Redux (ReactJs)
● NgRx (Angular)
● Vuex (VueJs)
Famous State Managers…..

6. Vuex stands second in GitHub Stars !!!

7. 2)Why do we need to use it???

8. Component Tree Strucuture - data sharing problem

9. ● Time consumption
● Performance Issue
● Data sharing becomes difficult
for complicated component
tree structure *************
Problems we face…..

10. Store and the Satellite - An Illustration…..

11. 3)How do we implement it?

13. STATE:
const state = {
apples: [ ]
};
MUTATIONS:
const mutations = {
setApples: (state, apples) => (state.apples =
apples)
};
GETTERS:
const getters = {
allApples: state =>
state.apples
};
ACTIONS:
const actions = {
async fetchapples({ commit }) {
const res = await axios.get(‘api/url’)
commit('setApples', res.data);
} };

14. 1)What is Vuex????
2)Why do we need to use it?
3)How do we implement it?

17. Presented By
Alershnan U
31-05-2019
Team of SquashApps