Vue新手指南 - Vuex 回顾

「这是我参与2022首次更文挑战的第26天，活动详情查看：2022首次更文挑战」

Vuex

在我们进入 Vuex 模拟之前，我们先选想想看，在什么情况下我们需要使用到 Vuex

场景1： 红色的指向线表示的是数据的流向，这样一看我们只需要使用 emit、prop 就可以应付自如了呢！

但是如果数据的流转改变成

场景1：

在没有 Vuex的情况下；你可能会抱头痛呼！ 我的天（当然也可以使用很多方式去解决啦！）（比如说从零打造简单状态管理）（就是为了引出 Vuex 欸嘿）

买它买它！

Vuex 是什么？

既然说的这么好用，那我们也需要先了解一下 Vuex到底是什么！

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。

• Vuex 采用集中式的方式存储需要共享的状态

• Vuex 的作用是进行状态管理，解决复杂组件通信，页面共享

• Vuex 集成到了 devtools 中， 提供了 time-travel 使馆旅行历史回滚功能

什么情况下使用 Vuex 呢？

当我们需要使用 Vuex 的时候，我们需要了解它带来的一些新的概念，一些 api

• 非必要的清空不要使用 Vuex

  • 当我们的项目不大，组件间状态共享不多的情况下，此时使用 Vuex 中间的花费，和对应的回报不成正比，。一个简单的 store 模式就足够了，实在不行还有 bus 呢！

• 中大型的单页面应用程序

  • 多个视依赖于同一个状态：例如购物车
  • 来自不同试图的行为需要变更同一个状态

引用 Redux 的作者 Dan Abramov 的话说就是：

Flux 架构就像眼镜：您自会知道什么时候需要它。

Vuex 的核心概念

• State：
  • 定义：Vuex 使用单一状态树，用一个对象就包含了全部的应用层级状态。
  • 使用：使用 mapState 简化 State 在视图中的使用，mapState 返回计算属性
• Getter
  • 定义：Getter 就是 store 中的计算属性
  • 使用：使用 mapGetter 简化视图中的使用
• mutation
  • 定义：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
  • 使用：使用 mapMutations 简化视图中的使用
• Action
  • 定义：Action 类似于 mutation，不同在于：
    • Action 提交的是 mutation，而不是直接变更状态。
    • Action 可以包含任意异步操作。
  • 使用：使用 mapActions 简化视图中的使用
• Module
  • 定义：由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。
  好了到这里 Vuex的概念基本上都回顾完毕了，接下来我们的目标是 手写 Vuex！加油一起来吧