vuex Detailed vue simple to use

vue concept: vuex Vue is supporting common data management tool that can put some shared data, save it to vuex, any component of the entire program to facilitate direct access to or modification of our public data;

Vuex configuration steps of:

1, run cnpm i vuex -S

2, the leader packet

 

import Vuex from 'vuex'

 

3, will be registered with the vue in vuex

Vue.use(Vuex)

4, new Vuex.Store () example, to obtain a data repository objects

 

var store = new new Vuex.Store ({ 
  state: { 
    // We can imagine the state of the Data component, designed to store data
     // If the assembly, wants to access, store the data, only through .. this $ store.state *** access 
    COUNT: 0 
  }, 
  mutations: { 
    // Note: If you want to store the value of the operating state, only through method calls provided by mutations in order to operate the corresponding data is not recommended direct operation state of the data, because if the cause of the disorder data, can not quickly locate the cause of the error, since each component may have a method of operating the data; 
    INCREMENT (state) { 
      state.count ++ 
    }, 
    / / Note: If the components you want to mutations in the method call, only this $ store.commit ( 'method name').
     // this method is invoked mutations format, and this $ emit ( 'parent component method name. ') 
    Subtract (State, obj) {
       //Parameter 2; state is state:: Note: the parameter list of the function mutations Up to two parameters, wherein the parameters over a parameter submitted by the commit; 
      the console.log (obj) 
      state.count - = (+ obj.c obj.d) 
    } 
  }, 
  getters: { 
    // Note: getters here, is only responsible for providing the external data, is not responsible for modifying the data, if you want to modify data in the state, please go to mutations 
    optCount: function (state) {
       return  ' most current count values are: ' + state.count 
    } 
    // through comparison review we found the method of getters, and the filter assembly relatively similar, and since the filters do not modify the original data getters are the the original data layer packaging made available to the caller;
     // Second, getters and also computed more like, as long as the state of the data changes, then, if getters just have cited this data, it will immediately trigger reevaluation of getters; 
  } 
})

 

to sum up:

 

1. state of data can not be directly modified, if you want to modify, must by mutations
2. If the components you want to get data directly from the state: $ store.state *** need the this
3. If the assembly wants modify data, it must be provided by the use of mutations required by this. $ store.commit ( 'method name ", a unique parameter)
4. If the data on the state store, when provided externally, one needs to do packaging, then we recommend the use of getters, if you need to use getters, then use this. $ store.getters. ***