5.Vuex的使用及API

Vuex

5.1 理解 vuex

5.1.1 vuex 是什么

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

2. Github 地址: https://github.com/vuejs/vuex

5.1.2 什么时候使用 Vuex

1. 多个组件依赖于同一状态

2. 来自不同组件的行为需要变更同一状态

5.1.3 Vuex 工作原理图

官方图：

5.2 vuex 核心概念和 API

5.2.1 state

1. vuex 管理的状态对象

2. 它应该是唯一的 3. 示例代码

3. 示例代码

   const state = {
   	xxxx:xxxx
   }
   

5.2.2 actions

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

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

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

   1. 在组件中使用: $store.dispatch(‘对应的 action 回调名’) 触发

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

5. 示例代码：

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

5.2.3 mutations

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

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

   1. 在 action 中使用：commit(‘对应的 mutations 方法名’) 触发

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

4. 示例代码：

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

5.2.4 getters

1. 值为一个对象，包含多个用于返回数据的函数

2. 如何使用？—— $store.getters.xxx

3. 示例代码：

   const getters = {
   	mmm(state){
   		return state.msg + '!'
   	}
   }
   

5.2.5 modules

1. 包含多个 module
2. 一个 module 是一个 store 的配置对象
3. 与一个组件（包含有共享数据）对应