文章目录
Vuex简述
非常官方的介绍
- Vuex是Vue全家桶中的一员,先放官方链接吧,可以自己去比较全面的看Vuex官方简介
以下是自己精简觉得重要的部分
- Vuex是一个专为Vue.js应用程序开发的状态管理模式。
- Vuex采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
- Vuex现已集成到了Vue的官方调试工具devtools中
- 当需要构建一个中大型的单页面应用时,那么我们会考虑到如何更好的在组件外部管理状态,那么Vuex是自然而然地选择
自己的一点点理解
- 其实官方的说明由于存在相关的术语,所以会让人有些迷惑,但其实我们可以把状态管理简单的理解为数据共享
- 举个例子来帮助理解:
比如我们有两个页面:主页和用户中心,那我们如何保证在我们登录了之后,主页显示的用户与用户中心是同一个人呢?
后端的时候,我们是将数据保存在session里的
但是,Vue中没有Session,所以我们想可以把用户数据分别写入主页和用户中心页面
但是,明明是相同的数据,现在却要在每个页面里都要重新去请求获取数据,非常繁琐
诶,办法来了,可以把数据全部都放在同一个地方,主页需要,主页就去拿,用户中心需要,用户中心就去拿
而状态管理就是这个共享数据的地方。
Vuex的核心内容
每一个Vuex应用的核心就是store,store可以理解为一个容器,包含着你的应用中大部分的状态。store里面有state、mutation、getters、actions、modules。
- state 官方说的是存放状态,其实就是数据
- mutation 操作state数据的方法集合,比如说对数据的修改、增加、删除等
- getters 就是你想的那样,类似于java中的getter,一个外界获取数据的接口
- actions 也是操作state数据的方法集合,与mutation的区别在于,mutation中如果进行异步操作,将会引起数据失效,所以需要提供了Actions来专门进行异步操作,最终提交mutation方法
- modules 这个就是字面意思,模块化,当我们的项目庞大时,状态非常的多,那么就采用模块化管理,Vuex允许我们将store分割成模块,也就是说每个模块都可以拥有自己的state、mutation、action、getter。
Vuex的工作流程
以下图来自Vuex的官网,为了方便看,就粘在这里了
准备工作
老样子,我还是用WebStorm2020.1版本
- 先用命令创建项目
- WebStorm打开后修改项目结构
其实就是删掉组件下的HelloWorld即可
- 命令安装vuex
- 安装辅助工具
因为本次有页面跳转,所以我们需要vue的路由
package.json里进行检查
- 为后续演示vuex的使用,我们写两个路由
vue-router的详细代码在这里不是重点,这里就不再赘述了
最终效果是下图这样的
Vuex的使用
本次的使用是依托于Vuex的官方文档里的Vue计数开始的
以下正式开始
引入Vuex模块
- main.js中引入vuex
state & mutation & action & getters
- main.js中创建Vuex Store实例(核心内容之state、mutations、actions、getters)
五个核心内容中这里有四个
获取state中的数据
- 在home组件中我们获取count的值
最终显示效果如下:
组件调用方法更改数据
- home组件中写个按钮,让计数器动起来
效果如下
点击按钮Add,count的值就会增加
!!这里必须解释一下了:button绑定的函数实际上调用的是mutation中的INCREMENT,但我们知道mutation中的方法外部组件是访问不到的,所以有了action提供外部接口,而action触发函数的方式是通过dispatch向组件分发函数
不同组件获取state中的同一个值
- 组件person中也获取count的值,可以发现即使count的值在home中进行了更改,person也立即获得了更改后的值
这个现象很好的说明了count这个数据放在了组件公共的部分
person组件里的代码
home中的count更改后,person组件中的count随之更改
module
- 先把状态管理的代码从main.js分离出来
/store/index.js中的内容
- 在store下创建modules用来存储模块
在Vuex的实例中直接引用模块
但这样做的风险在于,如果有另一模块也有相同数据count,那么在引入新的模块后就会报错
带命名空间的函数调用
- 向模块加命名空间
例如向count/index.js中添加命名空间
那么在组件中获取的时候就需要带上命名空间的路径了
使用命名空间调用函数时有三种方式:
1、使用dispatch
2、mapAction进行匹配
3、mapAction对路径进行统一添加
带命名空间的数据获取
以下三种都需要在script中进行引入
- mapActions方式
mapActions写在methods中
标签中的调用方式
- mapGetter方式
mapGetter也是写在methods下
标签中的调用方式
- mapState方式
mapState写在computed下
标签中调用方式: