Vue.js數據狀態管理-Vuex

Vue.js數據狀態管理-Vuex

[TOC]

上次分享回顧

父子組件的通訊

• 父 -> 子： props

• 子 -> 父： 自定義event

• 組件文檔化

Vuex起步

Vuex主要應用於中、大型單頁應用的數據狀態管理架構。

爲何要數據狀態管理？

• 組件數據共享

組件之間如何數據共享（組件通訊）

• 父 -> 子：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. 共享數據源

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

存在的問題

• 誰在emit事件？誰在on事件？父組件和子組件強耦合

• 如何追蹤數據的狀態變化？

• 業務邏輯遍及各個組件，致使各類意想不到的問題

Vuex基本概念

• state

  • 狀態的容器

• getters

  • 狀態的獲取函數

• mutations

  • 修改狀態的事件回調函數

• actions

  • 分發修改狀態的事件

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基本理解

• 數據的集合其中處理（DB）

• 數據的操做集中處理 （CRUD）

• 全部對數據的操做（CRUD）以請求（commit）的方式提交處理 （DAO）