前言
Vuex主要应用于中、大型单页应用的数据状态管理架构。
父子组件的通信
父 -> 子： props子 -> 父： 自定义event
组件数据共享
组件之间如何数据共享（组件通信）
父 -> 子：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
})
Vuex基本概念
state 状态的容器getters 状态的获取函数mutations 修改状态的事件回调函数actions 分发修改状态的事件
const store =
new Vuex.Store({
state: {
count:
0
},
mutations: {
INIT (state, data) {
state.
count = data.
count
},
INCREASE (state) {
state.
count++
},
DECREASE (state) {
state.
count--
}
},
getters: {
getCount (state) {
return state.
count
}
},
actions: {
init(context){
context.commit(
'INIT', {
count:
10
})
},
inc(context){
context.commit(
'INCREASE')
},
dec(context){
context.commit(
'DECREASE')
}
}
})
Vuex基本理解
数据的集合其中处理（DB）数据的操作集中处理 （CRUD）所有对数据的操作（CRUD）以请求（commit）的方式提交处理 （DAO）
