Vuex----核心概念和API

state 

1）vuex管理狀態的對象

2）它應該是惟一的 

       const state = {

          xxx:initValue

       }

mutations

1）包含多個直接更新state的方法（回調函數）的對象

2）誰來觸發：action中的commit（'mutation名稱'）

3）只能包含同步代碼，不能寫異步代碼

const mutations = {

yyy (state, {data1}) {

// 更新 state 的某個屬性

}

} 

actions

1）包含多個時間回調函數的對象

2）經過執行：commit()來觸發mutation的調用，簡介更新state

3）誰來觸發：組建中：$store.dispatch（‘action 名稱’,data1）//'zzz'

4）能夠包含異步代碼（定時器，ajax）

　　const actions = {

             zzz（{commit,state},data1）{

                 commit('yyy',{data1}) 

　　}

}

getters

1）包含多喝計算屬性（get）的對象

2）誰來讀取：組件中：$store.getters.xxx

    const getter = {

        mmm(state) {

            return...

        }

}

modules

1）包含多個module

2）一個module是一個store的配置對象

3）與一個組件（包含共享數據）對應

向外暴露store對象

export default new Vuex.Store({
 state, 
 mutations, 
 actions,
 getters 
})

組件中

import {mapState, mapGetters, mapActions} from 'vuex' 
export default {
 computed: {
   ...mapState(['xxx']), 
   ...mapGetters(['mmm']),
 }methods: mapActions(['zzz'])
 }
{{xxx}} {{mmm}} @click="zzz(data)"

映射store

import store from './store' 

new Vue({ store
}）

store對象

1）全部用vuex管理的組件中多了一個屬性$store，他就是一個store對象

2）屬性：

　　state：註冊的state對象

　　getters：註冊的getters對象

3）方法：

　　dispatch(actionName,data):分發調用action