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为例:
- 组件访问state数据的第一种方式:
this.$store.state.count
- 组件访问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中存放的数据
- 只能通过mutations变更state中的数据,不可直接操作
- 好处是可以集中管理所有数据变化
定义mutations
const store = new Vuex.Store({
state: {
count: 0
},
mutations:{
//通过调用add方法改变count值
add(state){ //state即代表当前的state
state.count++
}
}
})
在组件中调用mutations方法修改数据方式
- 第一种方式:
this.$store.commit('add')
(commit作用就是 调用某个mutations函数) - 第二种方式:通过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方法修改数据方式
- 第一种方式:
this.$store.dispatch('addAsync')
- 第二种方式:通过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中的数据
- 类似于computed属性
- state中的数据发生变化,getters中的数据也会跟着变化
个人理解:getters做的事情就是通过现有的state中的数据得到一些信息,例如统计当前列表中的信息条数、取出部分数据返回等操作。
定义getters
const store = new Vuex.Store({
state:{
count: 0
},
...
getters: {
showCount(state){
return 'count当前值为:【'+ state.count +'】';
}
}
})
在组件中调用getters方法
- 第一种方式:
this.$store.getters('showCount')
- 第二种方式:通过mapGetters函数将getters中的方法映射为当前组件自身的方法,从而进行调用
<template>
<h3>{{showCount}}</h3>
</template>
<script>
import {mapGetters} from 'vuex'
export default{
...
computed:{
...mapGetters(['showCount']),
}
}
</script>
案例
链接: 哔哩哔哩视频案例.