六、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使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件参数