vue state manager

1. What is vuex? 

vuex is a specially developed for the vue.js application state management.

2. Why vuex?

When we encounter a number of components shared state, pass the value of multi-layer assembly is very complicated, is not conducive to the maintenance, so we shared state components extracted, unified management, in this mode, regardless of which components are available at state or trigger the behavior.

3. vuex five basic objects

• state: storing state (variable)
• getters: to re-compile the previous data acquisition, can be understood as the calculation of state property. We use the $ sotre.getters.fun in the component ()
• mutations: modified state, and is synchronous. Use $ store.commit ( '', params) in the assembly. This component of our custom event similar. Submit mutions is the only way to change the status of the Vuex. mutations must be synchronized, if you need to use asynchronous actions.
• actions: asynchronous operation. Is used in the assembly where $ store.dispath ( ''), is dedicated to the operation data and business logic of the asynchronous requests, it does not change the state of the state directly, but to call a method by mutations in commit state in the changing The data.
• modules: store sub-module, in order to develop large-scale projects to facilitate the management and use of state. We will not explain here, and with them the same as above.

4. vuex applications

// New store.js file 

// initialization data 
State: {bannerlist: []}
 // request data 
Action: { 
    getbannerlist (context) { 
        axios.get ( '/ Banner') the then (RES =>. { 
            Context.commit ({ 
                type: changebannerlist 
                Data: res.data 
        }) 
    }) 
} 
// change state 
mutations: { 
    changeBannerlist (state, Data) { 
      state.bannerlist = data.data 
    } 
} 

// use the component 
computed: { 
    ... mapState ({ 
     bannerlist: (State) => state.home.bannerlist
   })
 }

created () {
   this.$store.dispatch('getBannerlist')
 }

The assembly used in place of vuex value and modify the value of?

// direct access to modify 
// state 
the this $ store.state.count.
 // getter 
the this $ store.getters.count.
 // invoke action to modify state value, with no arguments 
the this $ store.dispatch ( 'INCREMENT'. );
 // call to modify the action state value, with parameters 
the this $ store.dispatch ( 'INCREMENT', {value: 123}).;

Achieve vuex cached page refresh 6.pc end

Measures one: data vuex are saved directly to the browser cache (sessionStorage, localStorage, cookie) 
Option two: request when the page is refreshed again remote data, so that dynamic updates vuex Data 
Option three: a request to the background in the parent page remote data, and refresh the page before the data is first saved to vuex sessionStorage (in case the requested data is returned when the data is too large can not get the page to load)

Analysis: The 
way a drawback is unsafe, do not apply a large amount of data storage; 
The second method is suitable for small amounts of data, and the network will not be delayed; 
Option three is to talk about the focus, approach two and a way to use together.