vuex
vuex是vue的一个插件。对vue应用中多个组件的共享状态进行集中式的管理（读/写）。是组件间通信方法的一种
一、vue的应用就是一个状态自管理应用
1）state：驱动应用的数据源
2）view：以声明方式将state映射到视图。比如{{name}}声明式
3）actions：响应在view上的用户输入导致的状态变化（n个更新状态的方法）
如图：
二、多组件共享状态的问题
1）多个视图依赖于同一状态。
2）来自不同视图的行为需要变更同一状态。
3）以前的解决办法：
a：将数据以及操作数据的行为都定义在父组件。
b：将数据以及操作数据的行为传递给需要的各个子组件（有可能需要多级传递）
不适合大型的复杂页面应用
4）vuex就是用来解决这个问题的。
三、如何使用vuex
首先建立一个store.js向外暴露store对象
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
然后在main.js中引入store.js映射store
import store from '/store'
new Vue({
store
})
store对象
1）映射完后所有用vuex管理的组件中都多了一个属性 $store,是一个store对象
2）属性（用来获取数据展现）：
state：注册的state对象。
通过this.$store.state.xxx来访问。
getters：注册的getters对象。
通过this.$store.getters.xxx调用。
3）方法（更新状态、更新界面）：
dispatch(actionName, data)分发调用action
四、vuex核心概念和API
1、state
1）vuex管理的状态对象
2）它应该是唯一的
const state={
//里面包含具体的状态数据
name:'Tom'
}
2、mutations
1）包含多个直接更新state的方法（回调函数）的对象。
2）谁来触发：由action中的commit('mutation方法名称', data)。
3）只能包含同步的代码，不能写异步代码。
const mutations={
yyy(state, data){
//更新state的某个属性
}
}
3、actions
1）包含多个对应事件回调函数的对象。
2）通过执行commit()来触发mutation的调用，间接更新state。
3）谁来触发：组件中的事件调用$store.dispatch('action方法名称', data)。
4）可以包含异步代码（定时器、ajax）。
const actions={
zzz({commit, state}, data){
commit('yyy', data)
}
}
4、getters
1）包含多个计算属性（get）的对象。
2）谁来读取：组件中计算属性调用$store.getters.xxx
const getters={
mm(state, getters){
return...
}
}
五、组件中简化语法的使用
import {mapState, mapGetters, mapActions} from 'vuex'
export default {
computed:{
...mapState(['xxx']),
...mapGetters(['mmm'])
},
methods:mapActions(['zzz'])
或者methods:{
...mapActions(['zzz'])
}
}
模版中直接用{{xxx}},{{mmm}},@click='zzz(data)’
六、vuex结构分析图
