Vuex - web前端 | MrNobody = MrNobody's Blog = 保持呼吸不要断气

# Vuex 概述

# 组件之间共享数据

父向子传值：v-bind 属性绑定
子向父传值：自定义事件
兄弟之间共享数据：EventBus

$on 接收数据的那个组件
$emit 发送数据的那个组件

以上传值只适合小范围，如果需要频繁的大范围的共享就可使用 vuex

# Vuex 是什么

是实现组件全局状态 (数据) 管理的一种机制，可以方便的实现组件之间数据的共享

使用 Vuex 统一管理状态的好处

能够在 vuex 集中管理共享的数据，易于开发和后期维护
能够高效地实现组件之间的数据共享，提高开发效率
存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步

# Vuex 的基本使用

# 1. 安装 vuex 依赖包

npm i vuex -s

# 2. 导入 vuex 包

import Vuex from 'vuex'
Vue.use(Vuex)

# 3. 创建 store 对象、

	const store = new Vuex.store({
	//state 中存放的就是全局共享的数据
	state:{ count: 0 }
	})

# 4. 将 store 对象挂载到 vue 实例中

	new Vue({
	el:'#app',
	render:h=>h(app),
	router,
	// 将创建的共享数据，挂载到 Vue 实例中
	// 所有的组件，就可以直接从 store 中获取全局的数据了
	store
	})

# vuex 的核心概念

Vuex 中的主要核心概念如下：

State
Mutation
Action
Getter

# State

state 提供位移的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储

	// 创建 store 数据源，提供唯一公共数据
	const store = new Vuex.Store({
	state: { count: 0 }
	})

组件访问 State 中数据的第一种方式：

`this.$store.state.全局数据名称

组件访问 State 中数据的第二种方式：

	// 1. 从 vuex 中按需导入 mapState 函数
	import { mapState } from 'vuex'

通过刚才导入的 mapState 函数，将当前组件需要的全局数据，映射为当前组件的 computed 计算属性

	// 2. 将全局数据，映射为当前组件的计算属性
	computed:{
	...mapStated(['count'])
	}

# Mutation

Mutation 用于变更 Store 中的数据。

只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据
通过这种方式虽然操作起来繁琐一些，但是可以集中监控所有数据的变化

	// 定义 Mutation
	const store = new Vuex.store({
	state:{
	count: 0
	},
	mutations: {
	add(state) {
	// 变更状态
	state.count++
	}
	},
	})

	// 触发 mutation
	methods: {
	btnHandler1() {
	// 触发 mutation 的第一种方式
	this.$store.commit('add')
	}
	}

可以在触发 mutations 时传递参数

	mutations: {
	add(state, step) {
	// 变更状态
	state.count += step
	}
	},

	methods: {
	btnHandler1() {
	// 在调用 commit 函数，
	// 触发 mutations 时携带参数
	this.$store.commit('addN', 3)
	}
	}

this.$store.commit() 是触发 mutations 的第一种方式，触发 mutations 的第二种方式：

	// 1. 从 vuex 中按需导入 mapMutations 函数
	import { mapMutations } from 'vuex'

通过刚才导入的 mapMutations 函数将需要的 mutations 函数映射为当前组件的 methods 方法：

	// 2. 将指定的 mutations 函数映射为当前组件的 methods 函数
	methods: {
	...mapMutations(['sub', 'subN']),

	reduction1() {
	this.sub()
	},
	reduction2() {
	this.subN(3)
	}
	}

# Action

Action 用于处理异步任务
如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发 mutation 的方式间接变更数据。

定义 Action

	// 只有 mutation 中定义的函数，才有权力修改 state 中的数据
	mutations: {
	add(state) {
	// 不要在 mutations 函数中执行异步操作
	/* setTimeout(() => {
	state.count++
	},1000)*/
	state.count++
	},
	},
	actions: {
	addAsync(context) {
	setTimeout(() => {
	// 在 actions 中，不能直接修改 state 中的数据
	// 必须通过 context.commit () 触发某个 mutation 才行
	context.commit('add')
	}, 1000)
	}

触发 Action

	methods:{
	handle(){
	// 触发 actions 的第一种方式
	this.$store.dispath('addAsync')
	}
	}

触发 actions 异步任务时携带参数:

	mutations: {
	addN(state, step) {
	// 变更状态
	state.count += step
	},
	},
	actions: {
	addNAsync(context, step) {
	setTimeout(() => {
	context.commit('addN', step)
	}, 1000)
	}
	},

	btnHandlerWaitN() {
	this.$store.dispatch('addNAsync', 3)
	}

this.$store.dispath() 是触发 actions 的第一种方式，触发 actions 的第二种方式：

	// 1. 从 vuex 中按需导入 mapActions 函数
	import { mapActions } from 'vuex'

通过刚才导入的 mapActions 函数，将需要的 actions 函数，映射为当前组件的 methods 方法：

	methods:{
	...mapActions(['addAsync','addNsync'])
	}

# Getter

Getter 用于对 Store 中的数据进行加工处理形成新的数据。

Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。
Store 中数据发生变化，Getter 的数据也会跟着变化。

	export default new Vuex.Store({
	state: {
	count
	}
	})

使用 getters 的第一种方式

<h3>{ this.$store.getters.名称  }</h3>

使用 getters 的第二种方式

	<h1>{ showNum }</h1>

	import { mapGetters} from 'vuex'
	computed: {
	...mapGetters(['showNum'])
	},

前端 Vue