【前端高频面试题--Vuex篇】

 作者 ：“码上有前”
 文章简介 ：前端高频面试题
 欢迎小伙伴们 点赞、收藏⭐、留言

Vuex 的原理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用了集中式存储管理应用的所有组件的状态，并提供了一种可预测的方式来管理和修改状态。下面是 Vuex 的基本原理：

1. 单一状态树：Vuex 通过创建一个单一的状态树来管理应用的所有状态。这个状态树存储在 Vuex 的 store 对象中，它包含了应用的所有状态数据。

2. 状态是响应式的：Vuex 使用 Vue.js 的响应式系统来跟踪状态的变化。这意味着当状态发生变化时，相关的组件会自动更新。

3. 使用 getters 获取状态：Vuex 提供了 getters 来获取状态，类似于 Vue 组件中的计算属性。getters 可以对状态进行派生、计算和过滤，使得组件可以直接从 store 中获取经过处理的状态。

4. 提交 mutations 修改状态：Vuex 使用 mutations 来修改状态。mutations 是包含修改状态的函数的对象。每个 mutation 函数都会接收当前的状态和可选的负载（payload）参数，通过对状态的修改来实现数据的变化。mutations 只能进行同步操作。

5. 通过 actions 异步修改状态：对于异步操作，例如发起网络请求或定时器，Vuex 使用 actions。actions 包含了一系列的动作函数，这些函数可以触发 mutations 来修改状态。actions 可以进行异步操作，然后再提交 mutations 来修改状态。

6. 使用模块化组织代码：当应用的状态变得复杂时，Vuex 允许将状态分割成模块。每个模块都有自己的状态、mutations、actions 和 getters，可以通过模块化的方式组织和管理代码。

通过以上机制，Vuex 实现了状态的集中管理和可预测的状态变更。它使得多个组件可以共享和修改相同的状态，避免了状态在组件之间的传递和同步的复杂性。Vuex 的原理可以帮助开发者更好地组织和管理 Vue.js 应用的状态，并提升代码的可维护性和可测试性。

Vuex中action和mutation的区别

在 Vuex 中，action 和 mutation 是两种不同的概念，各自有着不同的作用和用途。下面是它们之间的区别：

Mutations（变更状态）：

• Mutations 是 Vuex 中用于修改状态的函数。
• Mutations 是同步操作，它们直接修改状态并且是在组件之外进行的。
• 只有通过 mutations 修改状态，才能保证状态变更的追踪和记录，以及能够被 Vue 的响应式系统检测到状态的变化。
• Mutations 通过提交（commit）来触发，并且在调用时需要指定一个唯一的字符串类型的标识符，用于指定要触发的 mutation 函数。
• Mutations 应该是纯函数，即给定相同的输入，始终返回相同的输出，而不产生副作用。

Actions（异步操作和封装）：

• Actions 是用于处理异步操作、封装复杂业务逻辑的函数。
• Actions 可以包含任意异步操作，如发送网络请求、定时器等。
• Actions 可以通过调用 mutations 来修改状态，从而实现状态的变更。
• Actions 在组件中通过分发（dispatch）来触发，并且也需要指定一个字符串类型的标识符来指定要触发的 action 函数。
• Actions 可以用于封装和组织复杂的业务逻辑，例如根据条件判断是否触发某个 mutation，或者在多个 mutation 之间进行协调。

总结起来，mutations 用于同步修改状态，而 actions 则用于处理异步操作和封装复杂业务逻辑。mutations 的作用是直接修改状态，而 actions 则可以通过调用 mutations 来间接修改状态。通过使用 actions，我们可以更好地组织和管理异步操作，同时也可以在需要时进行状态的变更。

Vuex 和 localStorage 的区别

Vuex 和 localStorage 是两种不同的状态管理和数据存储方式，它们有以下区别：

1. 数据持久性：

• Vuex：Vuex 是一个在内存中管理状态的工具，用于在 Vue.js 应用程序中共享和管理状态。Vuex 中的状态是临时存储的，只在当前页面的生命周期中存在。当页面刷新或关闭时，状态将被重置。
• localStorage：localStorage 是 Web 浏览器提供的一种持久化存储数据的机制。数据存储在浏览器的本地存储中，即使关闭了页面或浏览器，数据仍然保留在本地，下次访问时可以继续使用。

2. 数据共享范围：

• Vuex：Vuex 用于在 Vue.js 应用程序中共享状态。它的数据共享范围是在应用程序的所有组件之间，可以跨越组件层级传递和共享数据。
• localStorage：localStorage 存储的数据是全局可访问的，可以在同一域名下的所有页面中读取和写入数据。

3. 数据更新方式：

• Vuex：Vuex 遵循一种可预测的状态管理模式，通过 mutations 和 actions 来更新和操作状态。状态的变更是通过提交 mutations 或调用 actions 来触发的，以确保对状态的修改是可追踪和可控的。
• localStorage：localStorage 提供了简单的键值对存储，可以直接读写数据。数据的更新是直接通过修改 localStorage 中的值来实现的。

4. 功能和用途：

• Vuex：Vuex 主要用于管理 Vue.js 应用程序中的共享状态，它提供了一种集中式的方式来管理状态，方便状态的共享和修改。Vuex 还提供了一些工具和机制，如 getters、mutations 和 actions，用于处理复杂的状态逻辑和异步操作。
• localStorage：localStorage 主要用于在浏览器中持久化存储少量的数据。它适用于需要在多个页面或会话之间共享数据，或者需要在页面刷新或关闭后仍然保留数据的情况。

需要注意的是，尽管 Vuex 和 localStorage 在某些方面有相似之处，但它们的用途和设计目标不同。Vuex 更适合于在 Vue.js 应用程序中管理复杂的状态和数据流，而 localStorage 更适合于简单的数据存储和持久化需求。在具体的应用场景中，可以根据需求选择合适的方式来管理和存储数据。

Redux 和 Vuex 区别和共同思想

Redux 和 Vuex 是两个用于状态管理的流行工具，它们有一些区别和共同的思想。

区别：

1. 生态系统和框架： Redux 是一个独立的状态管理库，可以与多个 JavaScript 框架（如 React、Angular 和 Vue）一起使用。而 Vuex 是专门为 Vue.js 应用程序开发的状态管理库，与 Vue.js 紧密集成。

2. 概念和术语： Redux 和 Vuex 在概念和术语上有一些差异。Redux 强调纯函数和不可变性，使用 reducer 来处理状态变更。而 Vuex 强调使用 mutation 和 action 来修改状态，同时支持 Vue.js 的响应式系统。

3. 语法和用法： Redux 和 Vuex 在语法和用法上也有一些差异。Redux 使用纯 JavaScript，需要编写大量的样板代码来定义 action、reducer 和 store。而 Vuex 使用 Vue.js 的语法，通过创建 state、mutation、action 和 getter 对象来定义状态和操作。

共同思想：

1. 单一状态树： Redux 和 Vuex 都采用了单一状态树（单一数据源）的思想，将应用的所有状态存储在一个对象中，使得状态的变化可预测和可追踪。

2. 状态不可变性： Redux 和 Vuex 强调状态的不可变性，即不直接修改状态，而是通过创建新的状态对象来实现状态的变更。这有助于追踪状态的变化，并且可以更好地进行状态的比较和调试。

3. 通过动作修改状态： Redux 和 Vuex 都使用动作来修改状态。在 Redux 中，通过 dispatch action 来触发 reducer 来修改状态。在 Vuex 中，通过 commit mutation 或 dispatch action 来触发 mutation 来修改状态。

4. 中心化管理： Redux 和 Vuex 都提供了集中化的状态管理机制，将状态存储在一个中心化的存储对象中，并且可以在多个组件之间共享和访问状态。

5. 时间旅行调试： Redux 和 Vuex 都支持时间旅行调试的功能，可以记录和回放状态的变化，以便开发者进行调试和查看状态的历史。

尽管 Redux 和 Vuex 在实现细节和用法上有一些差异，但它们都遵循类似的思想和原则，旨在简化状态管理、提高可维护性，并促使开发者编写可预测和可测试的代码。

为什么要用 Vuex 或者 Redux

使用 Vuex 或 Redux 主要有以下几个原因：

1. 集中式状态管理： 当应用程序变得复杂，组件之间的状态共享和通信可能变得困难。Vuex 和 Redux 提供了集中式的状态管理，将应用程序的状态存储在一个中心化的存储对象中，使得状态的读取和修改变得简单和可预测。这样可以更好地组织和管理应用程序的状态，减少了组件之间的耦合性。

2. 可预测的状态变更： Vuex 和 Redux 强调通过定义明确的 action 和 mutation 来修改状态。这种显式的状态变更方式使得状态的变化变得可预测，开发者可以更好地理解和追踪状态的变化。同时，这也使得状态的修改变得可控，不会出现隐式的状态变更。

3. 方便的状态调试： Vuex 和 Redux 提供了强大的调试工具和开发者工具，可以方便地进行状态的调试和监控。开发者可以查看状态的变化历史，回放状态的变化，以及在开发过程中更好地理解和调试状态的变化。

4. 提高代码的可维护性： 使用 Vuex 或 Redux 可以将状态逻辑从组件中抽离出来，使得组件更专注于 UI 的渲染和交互。这样可以提高代码的可维护性，减少了组件的复杂性，使得代码更易于理解、调试和测试。

5. 支持异步操作和副作用管理： Vuex 和 Redux 提供了机制来处理异步操作和副作用。通过定义 action，可以封装和管理复杂的异步操作，如网络请求、定时器等。这样可以使应用程序的异步逻辑更可控、可测试，并且与同步逻辑保持一致。

需要注意的是，使用 Vuex 或 Redux 并不是必需的，特别是对于简单的应用程序或组件之间的简单状态传递，直接使用 Vue.js 或 React 的本地状态管理也是可以的。Vuex 和 Redux 更适合于大型、复杂的应用程序，或者需要跨组件共享状态和处理异步操作的场景。

Vuex有哪几种属性？

在 Vuex 中，有以下几种属性：

1. state（状态）： state 是存储应用程序的状态的对象。它可以包含应用程序中需要共享的数据。state 对象是响应式的，当 state 中的数据发生变化时，会自动更新相关的组件。

2. getters（获取器）： getters 提供了对 state 中数据的计算属性。可以通过定义 getters 来获取、计算和派生 state 中的数据，类似于 Vue 组件中的计算属性。

3. mutations（突变）： mutations 是用于修改 state 的方法。每个 mutation 都有一个字符串类型的事件名称和一个回调函数，在回调函数中可以修改 state 的数据。mutations 应该是同步的操作。

4. actions（动作）： actions 是用于处理异步操作和触发 mutations 的方法。每个 action 都有一个字符串类型的事件名称和一个回调函数，在回调函数中可以执行异步操作，然后通过调用 commit 方法来触发 mutations 修改 state。

5. modules（模块）： modules 允许将 Vuex 的状态和逻辑拆分为多个模块。每个模块拥有自己的 state、getters、mutations 和 actions。模块化的结构使得状态的管理更加灵活和可扩展。

需要注意的是，这些属性是 Vuex 的核心概念，但在实际使用中，可以根据应用程序的需求选择性地使用它们。

Vuex和单纯的全局对象有什么区别？

Vuex 和单纯的全局对象之间有几个区别：

1. 状态的集中管理： Vuex 提供了一个中心化的存储对象，用来存储应用程序的状态。相比于单纯的全局对象，Vuex 提供了更结构化、规范化的方式来管理状态。它定义了明确的状态属性、getters、mutations 和 actions，使得状态的读取、修改、计算和异步处理更加清晰和可控。

2. 响应式： Vuex 中的状态是响应式的，当状态发生变化时，相关的组件会自动更新。这是 Vue.js 的核心特性之一，通过使用 Vuex，可以确保状态的变化在整个应用程序中保持同步，并且能够自动触发组件的重新渲染。

3. 状态变更的追踪和调试： Vuex 提供了强大的调试工具和开发者工具，可以追踪和记录状态的变化。开发者可以查看状态的历史记录、回放状态的变化，以及在开发过程中更好地理解和调试状态的变化。而对于单纯的全局对象，需要自己实现状态变更的追踪和调试功能。

4. 状态变更的控制和约束： Vuex 强调使用 mutations 来修改状态，而 mutations 是同步的操作，通过这种方式可以确保状态的修改是可控的、可追踪的，并且能够遵循一定的规范。相比之下，单纯的全局对象没有这样的约束，状态的修改可能会比较随意，导致状态管理变得混乱和难以维护。

总之，Vuex 提供了一种结构化、规范化的方式来管理状态，使得状态的读取、修改、计算和异步处理更加清晰、可控和可追踪。相比于单纯的全局对象，Vuex 提供了更好的状态管理方案，特别适用于大型、复杂的应用程序，或者需要跨组件共享状态和处理异步操作的场景。

为什么 Vuex 的 mutation 中不能做异步操作？

在 Vuex 中，mutations 是用来同步地修改状态的方法，而不应该包含异步操作的逻辑。这是因为 mutations 的主要目的是追踪状态的变化，使得状态的修改可追踪、可预测和可调试。如果在 mutations 中包含异步操作，就会破坏这种可追踪性和可预测性。

以下是几个原因解释为什么 Vuex 的 mutation 中不能做异步操作：

1. 可预测性和追踪性： Vuex 的核心思想之一是提供可预测的状态变更。在 mutations 中进行异步操作会导致状态变化的时机变得不确定，不容易预测。同时，由于异步操作的执行是非阻塞的，多个异步操作可能会交叉执行，导致状态的变化变得混乱，难以追踪和调试。

2. 状态快照和时间旅行： Vuex 支持状态的快照和时间旅行调试。如果 mutations 中包含异步操作，就无法保证状态的快照和回放的一致性。异步操作可能会导致状态的变化无法被记录下来，从而影响调试工具的正确性和可用性。

3. 批量提交和性能优化： Vuex 可以通过批量提交 mutations 来优化性能。如果 mutations 中包含异步操作，就无法保证 mutations 的执行顺序和批量提交的效果，可能会导致性能上的问题。

为了解决异步操作的问题，Vuex 提供了 actions 这个特殊的属性。Actions 用于处理异步操作，并通过提交 mutations 来修改状态。这样可以保持 mutations 的同步性，同时又能处理异步逻辑。通过分离异步操作和同步状态修改的职责，可以更好地控制和管理状态的变化。

Vuex的严格模式是什么,有什么作用，如何开启？

Vuex 的严格模式（strict mode）是一种开发模式，用于在开发过程中检测不合法的状态修改，并给出警告。它的作用是帮助开发者更早地发现和修复潜在的问题，提高应用程序的健壮性和可维护性。

严格模式主要有以下作用：

1. 检测状态的非法修改： 在严格模式下，Vuex 会监测状态的修改操作是否是通过 mutations 进行的。如果在 mutations 外部直接修改了状态，会触发警告。这有助于防止意外的状态修改，确保状态的变化是可追踪和可控的。

2. 检测异步操作中的状态修改： 严格模式还可以检测异步操作中对状态的修改。在严格模式下，如果在 actions 中进行了异步操作并直接修改了状态，会触发警告。这有助于开发者遵循 Vuex 的设计原则，将异步操作放在 actions 中，通过提交 mutations 来修改状态。

为了开启 Vuex 的严格模式，可以在创建 Vuex 的实例时传入一个选项对象，其中的 strict 属性设置为 true。例如：

import Vuex from 'vuex';

const store = new Vuex.Store({
  // ...state、mutations、actions 等配置项...

  strict: true
});

需要注意的是，严格模式应该在开发阶段启用，而在生产环境中禁用。这是因为严格模式会对性能产生一些影响，并且在生产环境中，我们通常不需要实时监测状态的修改。可以通过构建工具或条件判断来确定是否开启严格模式。

如何在组件中批量使用Vuex的getter属性

要在组件中批量使用 Vuex 的 getter 属性，可以使用 Vuex 提供的 mapGetters 辅助函数。mapGetters 函数可以帮助我们将 getter 属性映射到组件的计算属性中，从而可以方便地在模板中使用。

以下是使用 mapGetters 的步骤：

1. 在组件的脚本部分，首先导入 mapGetters 辅助函数：

import { mapGetters } from 'vuex';

2. 在组件的 computed 属性中，使用 mapGetters 将 getter 属性映射为计算属性。可以传入一个数组或对象来指定需要映射的 getter 属性。

computed: {
  ...mapGetters(['getter1', 'getter2']),
  // 或者
  ...mapGetters({
    computedGetter1: 'getter1',
    computedGetter2: 'getter2'
  })
}

在上述代码中，getter1 和 getter2 是需要映射的 getter 属性，通过使用 mapGetters，它们将分别映射为组件的计算属性 getter1 和 getter2。

3. 在组件的模板中，就可以直接使用映射后的计算属性了：

<template>
  <div>
    <p>{{ getter1 }}p>
    <p>{{ getter2 }}p>
  div>
template>

通过以上步骤，我们成功地将 Vuex 的 getter 属性批量映射到了组件的计算属性中，并在模板中使用。

需要注意的是，为了使用 mapGetters，你需要确保 Vuex 已经正确地设置和配置，并且需要在组件中使用 Vuex 的 store 对象。

如何在组件中重复使用Vuex的mutation

要在组件中重复使用 Vuex 的 mutation，可以使用 Vuex 提供的 mapMutations 辅助函数。mapMutations 函数可以将指定的 mutation 映射到组件的方法中，从而可以在组件中直接调用这些 mutation。

以下是使用 mapMutations 的步骤：

1. 在组件的脚本部分，首先导入 mapMutations 辅助函数：

import { mapMutations } from 'vuex';

2. 在组件的 methods 属性中，使用 mapMutations 将需要重复使用的 mutation 映射为组件的方法。可以传入一个数组或对象来指定需要映射的 mutation。

methods: {
  ...mapMutations(['mutation1', 'mutation2']),
  // 或者
  ...mapMutations({
    customMutation1: 'mutation1',
    customMutation2: 'mutation2'
  })
}

在上述代码中，mutation1 和 mutation2 是需要映射的 mutation，通过使用 mapMutations，它们将分别映射为组件的方法 mutation1 和 mutation2。

3. 在组件中，就可以直接调用映射后的方法来触发相应的 mutation：

<template>
  <div>
    <button @click="mutation1">Trigger Mutation 1button>
    <button @click="mutation2">Trigger Mutation 2button>
  div>
template>

通过以上步骤，我们成功地将 Vuex 的 mutation 批量映射到了组件的方法中，并在模板中使用。

需要注意的是，在使用 mapMutations 时，你需要确保 Vuex 已经正确地设置和配置，并且需要在组件中使用 Vuex 的 store 对象。同时，映射后的方法名称与 mutation 名称保持一致，可以直接在组件中调用这些方法来触发对应的 mutation。
看到这了，点个赞吧，嘿嘿