vue状态管理存取数据_Vue.js数据状态管理-Vuex

Vue.js数据状态管理-Vuex

[TOC]

上次分享回顾

父子组件的通信

父 -> 子： 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)