vue 中的 Vuex

Vuex

Vuex是什么？

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

搭建Vuex环境

1. 下载安装vuex 使用命令： npm i vuex
2. 创建src/store/index.js该文件用于创建Vuex中最为核心的 store（store是文件）

Vuex Github地址

$bus.$on('getX',回调)
$bus.$emit('updateX',数据)

使用Vuex组件

什么时候使用Vuex

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

---

1. 引入Vuex【store/index.js】

import Vuex from 'vuex'

2. 注册Vuex插件

Vue.use(Vuex)

3. 准备三个组件 actions mutations state

准备actions–用于响应组件中的动作
const actions = {}
准备mutations–用于操作数据（state)
const mutations = {}
准备state–用于存储数据
const state = {}

4. 创建并暴露store

	export default new Vuex.Store({
			actions,
			mutations,
			state
		})

总结：

使用Vuex编写

• Vuex的基本使用

1．初始化数据state，配置actions .mutations，操作文件store.js

1. 读取vuex中的数据
   $store.state.数据名
2. 修改vuex中的数据 action方法 / mutations方法
   $store.dispatch( 'action中的方法名',数据)
$store.commit( 'mutations中的方法名',数据)

commit方法

getters 配置项

概念：当state 中的数据需要经过加工后再使用时，可以使用 getters 加工，相当于全局计算属性在store.js 中追加getters配置

引入全局计算属性 getters

	const getters = {
		bigSum(state){
			return state.sum *10
			}
		}
		//创建并暴露store
		export default new Vuex.Store({
			getters
		})

【src/index.js】

组件中读取数据

	$store.getters.bigSum

【文件内读取数据 Xxx.vue】

map方法

1. mapState方法：用于帮助映射state中的数据为计算属性
   
2. mapGetters方法：用于帮助映射getters 中的数据为计算属性
   
   √ 3. ** mapActions方法：用于帮助生成与actions对话的方法，即包含$store.dispatch(xxx)的函数**
   
   √ 4. mapMutations方法：用于帮助生成与mutations对话的方法，即包含
   $store.commit(xxx)的函数
   
   注意: mapActions 与mapMutations使用时
   若需要传递参数需要：在模板中绑定事件时传递好参数 否则参数是事件对象