上次分享回顧

父子組件的通信

• 父 -> 子： props
• 子 -> 父： 自定義event
• 組件文檔化

Vuex起步

Vuex主要應(yīng)用于中、大型單頁應(yīng)用的數(shù)據(jù)狀態(tài)管理架構(gòu)。

為什么要數(shù)據(jù)狀態(tài)管理？

• 組件數(shù)據(jù)共享

組件之間如何數(shù)據(jù)共享（組件通信）

• 父 -> 子：props
• 子 -> 父：自定義event
• 兄弟之間？其他非父子? ：自定義event？

可能的解法

1. 自定義event

   var bus = new Vue()
   // in component A's method
   bus.$emit('id-selected', 1)
   
   // in component B's created hook
   
   bus.$on('id-selected', function(id){
     //...
   })
   

2. 共享數(shù)據(jù)源

   const srcData = {
     count: 0
   }
   
   const vmA = new Vue({
     data: srcData
   })
   
   const vmB = new Vue({
     data: srcData
   })
   

存在的問題

• 誰在emit事件？誰在on事件？父組件和子組件強(qiáng)耦合
• 如何追蹤數(shù)據(jù)的狀態(tài)變化？
• 業(yè)務(wù)邏輯遍布各個(gè)組件，導(dǎo)致各種意想不到的問題

Vuex基本概念

• state
  • 狀態(tài)的容器
• getters
  • 狀態(tài)的獲取函數(shù)
• mutations
  • 修改狀態(tài)的事件回調(diào)函數(shù)
• actions
  • 分發(fā)修改狀態(tài)的事件

const store = new Vuex.Store({
  //state
  state: {
    count: 0
  },
  //mutations
  mutations: {
    INIT (state, data) {
      state.count = data.count
    },
    INCREASE (state) {
      state.count++
    },
    DECREASE (state) {
      state.count--
    }
  },
  //getters
  getters: {
    getCount (state) {
      return state.count
    }
  },
  //actions
  actions: {
    init(context){
      context.commit('INIT', {
        count: 10
      })
    },
    inc(context){
      context.commit('INCREASE')
    },
    dec(context){
      context.commit('DECREASE')
    }
  }
})

Vuex基本理解

• 數(shù)據(jù)的集合其中處理（DB）
• 數(shù)據(jù)的操作集中處理 （CRUD）
• 所有對(duì)數(shù)據(jù)的操作（CRUD）以請(qǐng)求（commit）的方式提交處理 （DAO）