vuex the store mechanism 1

The core vuex that store, it will contain most of the state of your program. But there are different and global objects.

1.vuex state memory is responsive to, when the reading state vue assembly from the store, the store if the state is changed, then the corresponding components will get efficient updates.

2. The only way the state can not be changed directly in the store, change is commit

Install your own Baidu

 

The easiest store as follows:

/ If the modular building system, make sure the beginning of the call Vue.use (Vuex) 

const Store = new new Vuex.Store ({ 
  State: { 
    COUNT: 0 
  }, 
  mutations: { 
    INCREMENT (State) { 
      state.count + + 
    } 
  } 
})

调用方式：store.state 获取状态 store.commit触发变更
store.commit('increment')


下面写一个完整的例子

Vue from Import 'VUE' 
Import from Vuex 'vuex' 
 
Vue.use (Vuex) 
 
Export Store const = new new Vuex.Store ({ 
    State: { // Set the attribute data for storing 
        Message: {} 
    }, 
    getters: { // the method used to obtain the corresponding attribute state in 
        the getMessage: state => state.message, 
    }, 
    mutations: { // property changes state 
        the setMessage (state, Data) { 
            state.message = Data 
        } 
    }, 
    Actions: { // application mutation 
        setMessage ({commit}, data) {
             commit('setMessage',data)  
      }
    }
})

getters way is for external can get, this. $ store.getters.getMessage this way the state will not be exposed

actions is to submit state mutations trigger the change, the only difference is the method where actions can do asynchronous processing mutations can only do state changes synchronized.

this.$store.dispatch('setMessage',data)

this.$store.commit('setMessage',data)