六、Vuex

六、Vuex

6.1 Vuex是什么

• 概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应 用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方 式，且适用于任意组件间通信。
• Github 地址: https://github.com/vuejs/vuex

6.1.2 什么时候使用 Vue

1. 多个组件依赖于同一状态
2. 来自不同组件的行为需要变更同一状态

6.1.3 案例

6.1.4 Vuex 工作原理图

6.2 vuex 核心概念和 API

6.2.1 state

1. vuex 管理的状态对象

2. 它应该是唯一的

3. 示例代码：

   

6.2.3 action

1. 值为一个对象，包含多个响应用户动作的回调函数

2. 通过 commit( )来触发 mutation 中函数的调用, 间接更新 state

3. 如何触发 actions 中的回调？

   

4. 可以包含异步代码（定时器, ajax 等等

5. 示例代码：

   

6.2.3 mutations

1. 值是一个对象，包含多个直接更新 state 的方

2. .谁能调用 mutations 中的方法？如何调用

   

3. mutations 中方法的特点：不能写异步代码、只能单纯的操作 stat

4. 示例代码：

   

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