【Vue(1)，字节大牛耗时八个月又一力作

• 多个界面都依赖同一个状态：一个状态改了，多个界面需要进行更新

• 不同界面的 Actions 想修改同一个状态

Vuex 背后的思想：

• 将共享的状态抽取出来，统一进行管理

• 之后每个视图，需要按照规定好的某种方法，进行访问和修改操作

Vuex 状态管理图例：

Vuex 基本使用

============================================================================

在 store/index.js 中管理状态：

import { createStore } from "vuex";



export default createStore({

  state: {

    counter: 0

  },

  mutations: {

    increment(state) {

      state.counter++;

    },

    decrement(state) {

      state.counter--;

    }

  },

  actions: {},

  modules: {},

  getters: {},

}); 

在 main.js 中将 store 挂载到 Vue 实例中

在其他 Vue 组件中，通过 this.$store 获取到 store 对象

• 通过 this.$store.state 来访问状态

• 通过 this.$store.commit('xxx') 来执行 mutations 中的方法，从而修改状态

为了使 Vuex 可以更明确的追踪状态的变化，不要直接改变 store.state.count 的值，通过 mutations 中的方法来修改 state 中的状态。

State 单一状态树

==============================================================================

如果状态信息是保存到多个 store 对象中的，那么之后的管理和维护等等都会变得特别困难，所以 Vuex 使用了单一状态树来管理应用层级的全部状态、

单一状态树能够让我们以最直接的方式找到某个状态的片段，而且在之后的维护和调试过程中，也可以非常方便的管理和维护。

Getters

==========================================================================

我们需要从 store 中获取一些 state 变异后的状态，比如下面的 store 中：

获取学生年龄大于20的个数：

• 在组件中使用 computed

  

• 使用 Vuex 的 getters：

  

Getters 作为参数和传递参数

---

如果我们已经有了一个获取所有年龄大于 20 岁学生列表的 getters，那么代码可以这样来写

getters 默认不能传递参数，如果想要传递参数，需要让 getters 本身返回另一个函数；

比如上面的案例中，我们希望根据 ID 获取用户的信息：

Mutation

===========================================================================

Mutation 状态更新

---

Vuex 的 store 状态的更新唯一方式：提交 Mutation

Mutation 主要包括两部分：

• 字符串的事件类型 (type)

• 一个回调函数 (handler)，该回调函数的第一个参数就是 state

mutation 的定义方式：

通过 mutation 更新：

Mutation 传递参数

---

在通过 mutation更 新数据的时候，有时候需要希望携带一些额外的参数

• 参数被称为 mutation 的 载荷 (Payload)

示例代码：

多个参数的传递以对象的形式进行，也就是 payload 是一个对象：

Mutation 提交风格

---

上面的通过 commit 进行提交是一种普通的方式

Vue 还提供了另外一种风格，它是一个包含 type 属性的对象

Mutation 中的处理方式是将整个 commit 的对象作为 payload 使用，所以代码没有改变：

Mutation 常量类型

---

当项目增大时，Vuex 管理的状态越来越多，需要更新状态的情况越来越多，意味着 Mutation 中的方法越来越多。方法过多，导致使用者需要花费大量的精力去记住这些方法，甚至是多个文件间来回切换，查看方法名称，甚至如果不是复制的时候，可能还会出现写错的情况

在各种 Flux 实现中，一种很常见的方案就是：使用常量替代 Mutation 事件的类型，我们可以将这些常量放在一个单独的文件中，方便管理

---

创建一个文件：mutation-types.js，并且在其中定义我们的常量

定义常量时可以使用 ES2015 中的风格，使用一个常量来作为函数的名称：

store 中用常量字符串来定义函数：

组件中使用常量字符串调用 store 的 mutations 更改 state：

Mutation 同步函数

---

通常情况下，Vuex 要求我们 Mutation 中的方法必须是同步方法，如果使用了异步操作，devtools 将不能很好的追踪 state 中的数据的改变。

Action

=========================================================================

Action 类似于 Mutation，但是是用来代替 Mutation 进行异步操作的

Action 的基本使用：

context 是和 store 对象具有相同方法和属性的对象

• 也就是说，我们可以通过 context 去进行 commit 相关的操作，也可以获取 context.state 等

• 注意，context 和 store 并不是同一个对象

Action 的分发

---

在 Vue 组件中，如果我们调用 action 中的方法，那么就需要使用 dispatch

它同样支持传递 payload：

Action 返回的 Promise

---

Promise 经常用于异步操作，在 Action 中，我们可以将异步操作放在一个 Promise 中，并且在成功或者失败后，调用对应的 resolve 或 reject

示例代码：

Module

=========================================================================

Vue 使用单一状态树，那么意味着很多状态都会交给 Vuex 来管理

• 当应用变得非常复杂时，store 对象就有可能变得相当臃肿

• 为了解决这个问题，Vuex 允许我们将 store 分割成模块 (Module)，而每个模块拥有自己的 state、mutations、actions、getters 等

  

Module 局部状态

---

注意：虽然的 doubleCount 和 increment 都是定义在对象内部的，但是在调用的时候，依然是通过 this.$store 来直接调用的

写在最后

很多人感叹“学习无用”，实际上之所以产生无用论，是因为自己想要的与自己所学的匹配不上，这也就意味着自己学得远远不够。无论是学习还是工作，都应该有主动性，所以如果拥有大厂梦，那么就要自己努力去实现它。

以上学习资料均免费放送，最后祝愿各位身体健康，顺利拿到心仪的offer！

由于文章的篇幅有限，所以这次的蚂蚁金服和京东面试题答案整理在了PDF文档里

资料获取方式：点赞+评论我的文章，关注我，然后戳这里即可免费领取

想要的与自己所学的匹配不上，这也就意味着自己学得远远不够。无论是学习还是工作，都应该有主动性，所以如果拥有大厂梦，那么就要自己努力去实现它。

以上学习资料均免费放送，最后祝愿各位身体健康，顺利拿到心仪的offer！

由于文章的篇幅有限，所以这次的蚂蚁金服和京东面试题答案整理在了PDF文档里

资料获取方式：点赞+评论我的文章，关注我，然后戳这里即可免费领取

[外链图片转存中…(img-23PbWeAu-1629254390247)]

[外链图片转存中…(img-WkQrdrmx-1629254390248)]

[外链图片转存中…(img-qZaNyyoa-1629254390249)]