Vuex笔记: Vuex简介

1. vuex是什么

对vue应用中多个组件的共享状态进行集中式的管理（读/写）。

2. 状态自管理应用

单向数据流：

View：初始化显示，更新显示；以声明方式将state映射到视图。
Actions：更新状态的函数；相应在view上的用户输入导致的状态变化（包含N个更新状态的方法）。
State：状态数据；驱动应用的数据源。

3. 多组件共享状态

多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。
以前的解决办法为：将数据以及操作数据的行为都定义在父组件；将数据以及操作数据的行为传递给需要的各个子组件（有可能需要多级传递）。
vuex就是用来解决这个问题的。

3.1 State

vuex管理的状态对象，它应该是唯一的。

const state = {
	xxx: initValue
}

3.2 Mutations

包含多个直接更新state的方法（回调函数）的对象。

const mutations = {
	yyy(state, data) {
		// 更新state的某个属性
	｝
}

3.3 Actions

包含多个事件回调函数的对象
通过执行commit()来触发mutation的调用，间接更新state

const actions = {
	zzz((commit, state), data1) {
		commit('yyy', data2)
	｝
}

3.4 Getters

包含多个计算属性get方法的对象

const getters =  {
	mmm(state) {
		return …
	}
}

3.5 向外暴露的store对象

export default new Vuex.Store ({
	state,
	mutations,
	actions,
	getters
})

6. 映射store

import store from './store'
new Vue({
	store
})

所有用vuex管理的组件中都多了一个属性$store，它就是一个store对象。
包含方法：

dispatch(actionName, data)    // 分发调用action