Vuex学习笔记

组件之间共享数据的方式

• 父传子：v-bind
• 子传父：v-on
• 兄弟组件之间：EventBus
  : $on - 接收数据的那个组件
  : $emit - 发送数据的那个组件

Vuex概念

Vuex是用来实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。
频繁、大范围的共享数据 即可用vuex

使用vuex好处：

• 能够集中管理共享数据
• 能够高效实现组件之间的数据共享
• vuex中的数据都是响应式的，实时保持数据与页面同步

Vuex的基本使用

1.state

state存放公共数据源，所有共享的数据都放在state中定义保存

const store = new Vuex.Store({
	state:{
		count: 0,
	}
	...
})

以下以count为例：

1. 组件访问state数据的第一种方式：this.$store.state.count
2. 组件访问state数据的第二种方式

ps: 对于两种方式，第一种适合例如在事件发生函数中需要获取到state中数据值，第二种适合在template中需要使用到state中属性值时使用。

<template>
	//映射为计算属性 也是这样使用
	<div>{{count}}</div>
</template>
<script>
	import {mapState} from 'vuex'
	export default{
		... //此处代表省略
		computed: {
		//mapState将全局变量count映射为当前组件的一个计算属性
		//三个点必须加 代表展开运算符
		//可传入多个state中的值 mapstate参数放的是数组！
			...mapState(['count']) 
		}
	}
</script>

2.mutations

mutations用于变更state中存放的数据

1. 只能通过mutations变更state中的数据，不可直接操作
2. 好处是可以集中管理所有数据变化

定义mutations

const store = new Vuex.Store({
	state: {
		count: 0
	},
	mutations:{
		//通过调用add方法改变count值
		add(state){ //state即代表当前的state
			state.count++
		}	
	}
})

在组件中调用mutations方法修改数据方式

1. 第一种方式：this.$store.commit('add') (commit作用就是 调用某个mutations函数)
2. 第二种方式：通过mapMutations函数将mutations中的方法映射为当前组件自身的方法，从而进行调用

<script>
import {mapMutations} from 'vuex'
export default{
	...
	methods:{
		...mapMutations(['subByN']), //subByN代表用传入的n去减count值
		subCount(){
			this.subByN(5); //每次以5减去count
		}
	}
}

mutations传递参数

mutations方法定义：

const store = new Vuex.Store({
	...
	mutations:{
		//第一个参数永远是state，后面可以定义想要传入的参数
		add(state,n){
			state.count += n
		}	
	}
})

传参：

	...
	methods:{
		addCount(){
			this.$store.commit('add',5);
		}
	}

3.actions

actions用来处理异步任务（Async）
如果需要通过异步操作的方式修改state中的属性值，不能直接使用mutations，必须在actions中触发mutations中的方法进行修改。

actions定义

const store = new Vuex.Store({
	...
	mutations:{
		add(state,n){
			state.count += n
		}	
	}, 
	actions:{
		addAsync(context){
			setTimeout(() => {//setTimeout()函数是异步操作
				context.commit('add',3);//调用了mutations中的方法
			},1000)	
		}	
	}
})

在组件中调用actions方法修改数据方式

1. 第一种方式：this.$store.dispatch('addAsync')
2. 第二种方式：通过mapActions函数将actions中的方法映射为当前组件自身的方法，从而进行调用

<template>
	<div>
		<button @click="addAsync(3)"></button>
	</div>
</template>
<script>
	import {mapActions} from 'vuex'
	export default{
		methods:{
			...mapActions(['addAsync'])
		}
	}
</script>

actions传递参数

与mutations相同，不再阐述

4.getters

getters用于对state中的数据进行加工处理形成新的数据，并不会修改state中的数据

1. 类似于computed属性
2. state中的数据发生变化，getters中的数据也会跟着变化

个人理解：getters做的事情就是通过现有的state中的数据得到一些信息，例如统计当前列表中的信息条数、取出部分数据返回等操作。

定义getters

const store = new Vuex.Store({
	state:{
		count: 0
	},
	...
	getters: {
		showCount(state){
			return 'count当前值为：【'+ state.count +'】';
		}	
	}
})

在组件中调用getters方法

1. 第一种方式：this.$store.getters('showCount')
2. 第二种方式：通过mapGetters函数将getters中的方法映射为当前组件自身的方法，从而进行调用

<template>
	<h3>{{showCount}}</h3>
</template>
<script>
	import {mapGetters} from 'vuex'
	export default{
		...
		computed:{
			...mapGetters(['showCount']),
		}	
	}
</script>

案例

链接: 哔哩哔哩视频案例.