Vuex（状态管理模式）

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下
  
  标签中调用方式：