上次分享回顾
父子组件的通信
- 父 -> 子： props
- 子 -> 父： 自定义event
- 组件文档化
Vuex起步
Vuex主要应用于中、大型单页应用的数据状态管理架构。
为什么要数据状态管理？
- 组件数据共享
组件之间如何数据共享（组件通信）
- 父 -> 子：props
- 子 -> 父：自定义event
- 兄弟之间？其他非父子? ：自定义event？
可能的解法
-
自定义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){ //... }) -
共享数据源
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）
