Vue.js数据状态管理-Vuex

上次分享回顾

父子组件的通信

• 父 -> 子： 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）