文章目录
一、Vuex的概述
1.回顾–组件之间共享数据的方式
(仅适合在小范围内实现数据共享)
父向子传值:v-bind属性绑定
子向父传值:v-on 事件绑定
兄弟组件之间共享数据:EventBus
$on:接收数据的那个组件
$emit:发送数据的那个组件
2.Vuex是什么
Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享
没有使用 Vuex时 想要实现数据的分享 需要将值传到附近的组件中
使用Vued时 实现数据共享 只需要将组件中的值传到store 其他组件可以从store中进行数据的调用
3.使用Vuex统一管理状态的好处
①能够在vuex中集中管理共享的数据,易于开发和后期维护
②能够高效地实现组件之间的数据共享,提高开发效率
③存储在Vuex中的数据都是响应式的,能够实时保持数据与页面的同步
4.什么样的数据适合存储在Vuex中
一般情况下,只有组件之间共享的数据,才有必要存储在vuex中,对于组件中私有数据,依旧存储在组件自身的data中即可
二、Vuex的基本使用
三、Vuex核心概念
- State
- Mutations
- Actions
- Gettters
1.State
State提供唯一的公共数据源,所有共享的数据都要统一放到Store的State中进行存储
组件访问State中数据的第一种方式:
this.$store.state.全局数据名称
eg:
组件访问State中数据的第二种方式:
2.Mutations
//以下不合法代码 —不允许直接修改全局下的变量
所以要用到Mutations
Mutations用于变更Store中的数据
1.只有通过mutations变更Store数据,不可以直接操作Store中的数据
2.通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化
mutations的使用
mutations中的方法第一个形参永远都是state
注意:记住只有mutations中的函数才有权利修改(state中的数据)全局数据
可以在触发mutations时传递参数:
通过commit可以调用addN方法 然后可以通过参数3 进行传值
将3传递给step
this.$store.commit()是触发mutations的第一种方式,触发mutations的第二种方式:
然后可以在自己的组件中通过this进行调用
不要在mutations里添加异步操作
3.Actions
Actions用于处理异步任务
如果通过异步操作变更数据,必须通过Actions,而不能使用Mutations,但是在Action中还是要通过触发Mutations的方式间接变更数据 (即Action中不能进行数据的修改 只有mutations中才能修改数据)
记住:commit用于触发某个mutations函数
dispatch用于触发某个actions函数
触发actions异步任务是携带参数
注意 在actions中调用mutations使用的是**context.**commit
this.$store.dispatch()是触发actions的第一种方式,触发actions的第二种方式:
1.从vuex中按需导入mapActions函数
import {mapActions} from ‘vuex’
通过刚才导入的mapActions函数,将需要的actions函数,映射为当前组件的methods方法:
2.将指定的actions函数,映射为当前组件的methods函数
methods:{
…mapActions([‘addASync’,‘addNASync’])
}
4.Getters
Getters用于对Store中的数据进行加工处理形成新的数据
注意:Getters不会修改store中的源数据,只起到包装数据的作用
1.getters可以对Store中已有的数据加工处理之后形成新的数据,类似Vue的计算属性
2.Store中的数据发生变化,Getters的数据也会跟着变化
使用Getters的第一种方式:
this.$store.getters.名称
使用Getters的第二种方式
import {mapGetters} from ‘vuex’
computed:{
…mapGetters([‘showNum’])
}