六、Vuex
6.1 Vuex是什么
- 概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应 用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方 式，且适用于任意组件间通信。
- Github 地址: https://github.com/vuejs/vuex
6.1.2 什么时候使用 Vue
- 多个组件依赖于同一状态
- 来自不同组件的行为需要变更同一状态
6.1.3 案例
6.1.4 Vuex 工作原理图
6.2 vuex 核心概念和 API
6.2.1 state
-
vuex 管理的状态对象
-
它应该是唯一的
-
示例代码：
6.2.3 action
-
值为一个对象，包含多个响应用户动作的回调函数
-
通过 commit( )来触发 mutation 中函数的调用, 间接更新 state
-
如何触发 actions 中的回调？
-
可以包含异步代码（定时器, ajax 等等
-
示例代码：
6.2.3 mutations
-
值是一个对象，包含多个直接更新 state 的方
-
.谁能调用 mutations 中的方法？如何调用
-
mutations 中方法的特点：不能写异步代码、只能单纯的操作 stat
-
示例代码：
6.3 四个map方法的使用
6.3.1 mapState方法
- 用于帮我们映射
state中的数据为计算属性。
computed:{//借助mapState生成计算属性，从state中读取数据。（对象写法）...mapState({sum:'sum',school:'school',student:'student'}),//借助mapState生成计算属性，从state中读取数据。（数组写法）...mapState(["school","sum","student"]),}
6.3.2 mapGetters方法
- 用于帮助我们映射
getters中的数据为计算属性
computed:{//借助mapGetters生成计算属性，从state中读取数据。（对象写法）...mapGetters({bigSum:'bigSum'}),//借助mapGetters生成计算属性，从state中读取数据。（数组写法）...mapGetters(["bigSum"])}
6.3.3 mapActions方法
- 用于帮助我们生成与
actions对话的方法，即包含$store.dispatch(xxx)的函数
methods:{//借助mapActions生成对应的方法，方法中会调用 dispatch 去联系 actions （对象写法）...mapActions({incrementOdd:'incrementOdd',incrementWait:'incrementWait'}),//借助mapActions生成对应的方法，方法中会调用 dispatch 去联系 actions （数组写法）...mapActions(['incrementOdd','incrementWait'])},
6.3.4 mapMutations方法
- 用于帮助我们生成与
mutations对话的方法，即：包含$.store.commit(xxx)的函数
methods:{//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（对象写法）...mapMutations({decrement:'DECREMENT',increment:'INCREMENT'}),//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（数组写法）...mapMutations(['DECREMENT','INCREMENT']),},
mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件参数
