深入理解 Vuex：Vue.js 应用中的状态管理利器

随着前端应用的日益复杂，数据管理成为了一个核心挑战。在一个由众多组件构成的单页应用（SPA）中，不同组件之间的数据共享、状态同步以及状态变更的可追踪性变得尤为重要。Vue.js 作为一个流行的前端框架，提供了强大的组件化能力和响应式系统，但当应用规模扩大，组件层级加深时，如何优雅地管理共享状态就成了一个必须面对的问题。这时，Vuex 应运而生，作为 Vue.js 官方推荐的状态管理库，它为 Vue 应用提供了一个集中式的状态存储管理方案。

本文将深入探讨什么是状态管理，为什么我们需要它，以及 Vuex 如何帮助我们有效地管理 Vue 应用中的状态。我们将详细剖析 Vuex 的核心概念，并解释它们是如何协同工作的。

第一部分：理解状态管理——为什么需要一个集中式仓库？

在开始讨论 Vuex 之前，我们首先需要理解“状态管理”是什么，以及它解决了哪些问题。

什么是状态？

在前端应用中，“状态”（State）通常指的是那些需要被应用中的多个部分访问和修改的数据。这些数据可能包括：

用户信息（登录状态、用户详情）
应用配置（主题模式、语言设置）
UI 状态（模态框的显示/隐藏、加载状态）
从后端获取的数据（商品列表、订单信息）
用户输入的数据（表单草稿）

这些状态是动态变化的，并且它们的变化会直接影响用户界面的展示和应用的整体行为。

组件化带来的挑战

Vue.js 应用通常由嵌套的组件树构成。每个组件都可以拥有自己的局部状态（通过 data() 或 ref/reactive）。对于简单的数据流，父组件可以通过 props 向子组件传递数据，子组件可以通过 $emit 向上级组件发送事件来通知状态的变化。这在组件层级不深、数据流向清晰的应用中工作得很好。

然而，随着应用复杂度的提升，我们很快会遇到以下问题：

多层嵌套的 prop 传递 (Prop Drilling)： 如果一个深层嵌套的子组件需要访问一个位于顶层父组件的状态，这个状态可能需要通过中间的多个组件层层传递 prop 下去。这不仅使得代码变得冗余和难以维护，而且中间组件即使不关心这个状态，也必须参与到传递过程中。
跨组件通信困难： 当两个没有直接父子关系的组件需要共享或同步状态时，传统的 props 和 $emit 机制就显得力不从心。开发者可能会诉诸于全局事件总线（Event Bus），但这会引入新的问题：事件的发送者和监听者之间耦合紧密，事件流变得难以追踪，调试困难，而且随着事件类型的增多，容易造成命名冲突和管理混乱。
状态变更追踪困难： 在大型应用中，一个状态可能在多个地方被修改。如果没有一个统一的机制来管理这些修改，开发者将很难追踪是哪个操作、在何时、为何改变了某个状态。这给调试带来了巨大挑战，尤其是在出现难以复现的 bug 时。
代码的可预测性差： 由于状态可能在任何地方被任意修改，应用的行为变得不可预测，增加了维护和协作的难度。

集中式状态管理的概念

为了解决上述问题，状态管理模式应运而生。其核心思想是将应用中所有共享的状态集中存储在一个地方，通常称之为“仓库”（Store）。所有组件都从这个唯一的仓库中获取状态，并通过统一的、规范化的方式来修改状态。

这种模式带来的好处是显而易见：

单一事实来源 (Single Source of Truth)： 所有共享状态都在一个地方，消除了数据冗余和不一致的问题。
状态变更可预测： 状态的修改必须通过特定的流程，使得每一次状态变更都有迹可循。
更容易调试和维护： 通过查看状态变更日志，开发者可以清楚地了解应用的状态流，快速定位问题。
更清晰的组件职责： 组件只负责展示 UI 和触发状态变更的“意图”，而不直接管理复杂的共享状态逻辑。

Vuex 就是 Vue.js 官方为解决这些问题而提供的状态管理库，它实现了这种集中式状态管理模式。

第二部分：什么是 Vuex？Vue.js 的官方状态管理库

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以可预测的方式进行状态更新。

简单来说，Vuex 就像一个放置在应用中心的“大脑”或“银行”，所有组件都可以向它存取数据，但存取数据的规则是统一且严格的。

Vuex 的核心理念是将应用的状态（State）集中在一个 Store 对象中。这个 Store 对象包含并管理着应用的所有共享状态。同时，Vuex 定义了一套严格的规则，规定了如何从 Store 中获取状态（Getters），如何同步修改状态（Mutations），以及如何异步执行操作并提交 Mutation 来修改状态（Actions）。

通过强制遵循这些规则，Vuex 确保了应用的状态变更总是以可预测和可追踪的方式进行，极大地提高了大型应用的开发效率和可维护性。

第三部分：Vuex 的核心概念及其工作原理

Vuex Store 包含了几个核心概念：State、Getters、Mutations、Actions 和 Modules。理解这些概念及其之间的关系是掌握 Vuex 的关键。

1. State (状态)

定义： State 是 Store 的核心，它是一个 JavaScript 对象，包含了应用中所有共享的状态数据。State 是“单一事实来源”的具体体现。
特点： State 中的数据是响应式的。当 Store 的 State 发生变化时，所有依赖这个 State 的 Vue 组件都会自动更新其视图。
访问方式： 在 Vue 组件中，可以通过 this.$store.state 来访问 Store 中的 State。为了更方便地访问 State，Vuex 提供了 mapState 辅助函数，可以帮助我们将 State 映射到组件的计算属性中。
重要原则： 不应该直接修改 Store 中的 State。 任何 State 的修改都必须通过提交（Commit）Mutation 来完成。这是为了确保所有状态变更都是可追踪的。

示例 (概念性)：

“`javascript
// 假设我们的 Store State 如下
const store = new Vuex.Store({
state: {
count: 0,
user: null,
isLoading: false
}
});

// 在组件中访问
console.log(this.$store.state.count); // 访问 count
console.log(this.$store.state.user); // 访问 user

// 使用 mapState
import { mapState } from ‘vuex’;

export default {
computed: {
// 将 this.$store.state.count 映射为组件的 this.count
//…mapState([‘count’, ‘user’]),
// 或者映射为不同的名字
//…mapState({
// myCount: ‘count’,
// currentUser: ‘user’
//})
}
// 现在可以在模板中直接使用 {{ count }} 或 {{ user }}
}
“`

2. Getters (获取器)

定义： Getters 可以被认为是 Store 的计算属性 (Computed Properties)。它们用于从 State 中派生出一些新的状态，或者对 State 进行过滤、计算等操作。
特点： Getters 的返回值是响应式的，并且它们会根据其依赖的 State 进行缓存。只有当依赖的 State 发生变化时，Getters 才会重新计算。这与 Vue 组件中的计算属性非常相似。
作用：
- 对 State 进行过滤或处理，例如获取已完成的任务列表。
- 从 State 中派生出新的数据，例如计算购物车的总金额。
- 方便组件访问经过处理的状态，避免在多个组件中重复相同的计算逻辑。
访问方式： 在 Vue 组件中，可以通过 this.$store.getters 来访问 Getters。同样，Vuex 提供了 mapGetters 辅助函数来将 Getters 映射到组件的计算属性。

示例 (概念性)：

“`javascript
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: ‘Learn Vuex’, done: true },
{ id: 2, text: ‘Master Vuex’, done: false }
]
},
getters: {
// 根据 todos 状态派生出一个新的 getters: completedTodos
completedTodos: state => {
return state.todos.filter(todo => todo.done);
},
// getters 也可以接受其他 getters 作为第二个参数
completedTodosCount: (state, getters) => {
return getters.completedTodos.length;
},
// getters 也可以返回一个函数，实现向 getters 传递参数
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id);
}
}
});

// 在组件中访问
console.log(this.$store.getters.completedTodos); // 访问 completedTodos
console.log(this.$store.getters.completedTodosCount); // 访问 completedTodosCount
console.log(this.$store.getters.getTodoById(1)); // 访问 getTodoById 并传递参数

// 使用 mapGetters
import { mapGetters } from ‘vuex’;

export default {
computed: {
// 将 this.$store.getters.completedTodos 映射为组件的 this.completedTodos
//…mapGetters([‘completedTodos’, ‘completedTodosCount’]),
// 或者映射为不同的名字
//…mapGetters({
// doneTodos: ‘completedTodos’
//})
}
// 现在可以在模板中使用 {{ completedTodosCount }} 等
}
“`

3. Mutations (突变)

定义： Mutations 是 Vuex 中唯一允许同步修改 State 的地方。每个 Mutation 都有一个字符串类型的事件类型 (type) 和一个处理函数 (handler)。
特点： Mutation 的处理函数总是接收 State 作为第一个参数。它还可以接收第二个可选参数，称为载荷 (payload)，用于传递需要的数据。
重要原则： Mutation 必须是同步函数。这是 Vuex Devtools 能够记录所有状态变更并实现时间旅行调试的关键。如果在 Mutation 中执行异步操作（如 setTimeout 或 API 请求），那么状态的变化将无法被 Devtools 准确追踪到，导致状态变更的顺序和结果不可预测。
触发方式： 在 Vue 组件或 Actions 中，通过 store.commit() 方法来触发（提交）Mutation。
作用： 封装 State 的修改逻辑，确保所有状态变更都有明确的入口和记录。

示例 (概念性)：

“`javascript
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
// Mutation 的类型是 ‘increment’
// 处理函数接收 state 作为第一个参数
increment(state) {
state.count++;
},
// Mutation 可以接收载荷 (payload) 作为第二个参数
incrementBy(state, payload) {
state.count += payload.amount; // payload 通常是一个对象
}
}
});

// 在组件中提交 Mutation
// 方式一：对象风格提交
this.$store.commit(‘increment’);
// 方式二：带载荷的对象风格提交
this.$store.commit(‘incrementBy’, { amount: 10 });
// 方式三：类型+载荷风格 (较少使用)
//this.$store.commit({
// type: ‘incrementBy’,
// amount: 10
//});

// 使用 mapMutations
import { mapMutations } from ‘vuex’;

export default {
methods: {
// 将 this.$store.commit(‘increment’) 映射为组件的 this.increment()
//…mapMutations([‘increment’]),
// 将 this.$store.commit(‘incrementBy’, payload) 映射为组件的 this.incrementBy(payload)
//…mapMutations([‘incrementBy’]),
// 或者映射为不同的名字
//…mapMutations({
// add: ‘incrementBy’
//})
}
// 现在可以在模板或 methods 中调用 this.increment() 或 this.incrementBy({ amount: 5 })
}
“`

4. Actions (动作)

定义： Actions 类似于 Mutations，也用于修改 State，但它们不同的是：
- Actions 可以包含异步操作。
- Actions 通过提交 Mutation 来修改 State，而不是直接修改 State。
特点： Action 的处理函数接收一个 context 对象作为第一个参数。这个 context 对象包含了 Store 实例的许多属性和方法，最常用的是：
- context.state: 访问当前模块的 State。
- context.rootState: 访问根 State。
- context.getters: 访问当前模块的 Getters。
- context.rootGetters: 访问根 Getters。
- context.commit: 用于提交 Mutation。
- context.dispatch: 用于分发（触发）其他 Action。
触发方式： 在 Vue 组件或 Actions 中，通过 store.dispatch() 方法来触发（分发）Action。
作用： 处理复杂的业务逻辑、异步操作（如 API 调用、定时器）、流程控制，然后通过提交 Mutation 来更新 State。它将异步操作和业务逻辑与 State 的直接修改（Mutation）分离开来，使得 Mutation 保持纯粹（同步且只负责修改 State）。

示例 (概念性)：

“`javascript
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
},
incrementBy(state, amount) { // Mutation 载荷通常是对象，这里简化为 amount
state.count += amount;
}
},
actions: {
// Action 处理函数接收 context 对象
incrementAsync(context) {
// 可以在 Action 中执行异步操作
setTimeout(() => {
// 异步完成后，提交一个 Mutation 来修改 State
context.commit(‘increment’);
}, 1000);
},
// Action 可以接收载荷 (payload)
incrementByAsync({ commit }, payload) { // 使用对象解构获取 commit
setTimeout(() => {
commit(‘incrementBy’, payload.amount); // 提交带载荷的 Mutation
}, 1000);
},
// Action 中可以分发其他 Action 或提交 Mutation
actionA({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit(‘increment’);
resolve();
}, 1000);
});
},
actionB({ dispatch, commit }) {
return dispatch(‘actionA’).then(() => {
commit(‘incrementBy’, 5);
});
}
}
});

// 在组件中分发 Action
this.$store.dispatch(‘incrementAsync’);
this.$store.dispatch(‘incrementByAsync’, { amount: 20 });
this.$store.dispatch(‘actionB’); // 分发 actionB，它会先分发 actionA

// 使用 mapActions
import { mapActions } from ‘vuex’;

export default {
methods: {
// 将 this.$store.dispatch(‘incrementAsync’) 映射为组件的 this.incrementAsync()
//…mapActions([‘incrementAsync’, ‘incrementByAsync’]),
// 或者映射为不同的名字
//…mapActions({
// addAsync: ‘incrementAsync’
//})
}
// 现在可以在模板或 methods 中调用 this.incrementAsync()
}
“`

Mutation 与 Action 的区别总结：

特性	Mutation	Action
修改 State	直接且必须同步修改 State	通过提交 Mutation 来修改 State
异步操作	不允许包含异步操作	可以包含异步操作
触发方式	通过 `store.commit()` 提交	通过 `store.dispatch()` 分发
参数	接收 `state` 和可选的 `payload`	接收 `context` 和可选的 `payload`
目的	记录状态的原子性、同步变更	处理业务逻辑、异步流程，再触发变更

5. Modules (模块)

定义： 随着应用状态的增长，Store 对象可能会变得非常庞大，难以维护。Vuex 允许我们将 Store 分割成模块（Modules）。每个模块都可以拥有自己的 State、Getters、Mutations、Actions，甚至嵌套的子模块。
特点： 模块内的 State、Getters、Mutations、Actions 默认情况下是注册在 Store 的全局命名空间下的。这意味着不同模块的 Mutations 或 Actions 如果有相同的名字，可能会相互覆盖或干扰。为了解决这个问题，模块可以开启命名空间 (Namespaced)。
命名空间 (Namespaced): 当一个模块开启 namespaced: true 后，它的所有 State、Getters、Mutations、Actions 都会被注册到该模块名下的命名空间中。这样可以有效避免不同模块之间的命名冲突，并且使得模块内的代码更加独立和可复用。
作用： 组织大型 Store，提高代码的可维护性和可读性，实现模块化开发。

示例 (概念性)：

“`javascript
// 定义一个 user 模块
const userModule = {
namespaced: true, // 开启命名空间
state: () => ({
name: ”,
isAuthenticated: false
}),
mutations: {
setUser(state, user) {
state.name = user.name;
state.isAuthenticated = true;
},
clearUser(state) {
state.name = ”;
state.isAuthenticated = false;
}
},
actions: {
login({ commit }, credentials) {
// 模拟异步登录
return new Promise((resolve) => {
setTimeout(() => {
const fakeUser = { name: credentials.username };
commit(‘setUser’, fakeUser); // 提交模块内的 mutation
resolve(fakeUser);
}, 500);
});
},
logout({ commit }) {
commit(‘clearUser’); // 提交模块内的 mutation
}
},
getters: {
isLoggedIn: state => state.isAuthenticated, // 访问模块内的 state
userName: state => state.name
}
};

// 定义一个 products 模块
const productsModule = {
namespaced: true, // 开启命名空间
state: () => ({
list: []
}),
mutations: {
setProducts(state, products) {
state.list = products;
}
},
actions: {
async fetchProducts({ commit, rootState }) { // Action 可以访问根 state
// 模拟异步获取产品列表
const products = await new Promise(resolve => {
setTimeout(() => resolve([{ id: 1, name: ‘Product A’ }]), 600);
});
commit(‘setProducts’, products); // 提交模块内的 mutation
// 可以通过 rootState.user.name 访问根状态或其他模块状态 (如果不是命名空间模式)
// 或者通过 rootState.userModule.name (如果 userModule 开启了命名空间并在根 store 注册时使用了 userModule 键)
console.log(‘User is logged in:’, rootState.userModule.isAuthenticated); // 访问其他命名空间模块的状态
}
},
getters: {
allProducts: state => state.list // 访问模块内的 state
}
};

const store = new Vuex.Store({
// 根级别的 state, mutations, actions, getters (可选)
state: {
appTitle: ‘My Awesome App’
},
// 注册模块
modules: {
user: userModule, // 注册到 user 命名空间
products: productsModule // 注册到 products 命名空间
}
});

// 在组件中访问命名空间模块的 state, getters, mutations, actions
console.log(this.$store.state.appTitle); // 访问根 state
console.log(this.$store.state.user.name); // 访问 user 模块的 state
console.log(this.$store.getters[‘user/isLoggedIn’]); // 访问 user 模块的 getter
this.$store.commit(‘user/setUser’, { name: ‘Alice’ }); // 提交 user 模块的 mutation
this.$store.dispatch(‘products/fetchProducts’); // 分发 products 模块的 action

// 使用 mapState/mapGetters/mapMutations/mapActions 结合命名空间
import { createNamespacedHelpers } from ‘vuex’;

const { mapState, mapGetters, mapMutations, mapActions } = createNamespacedHelpers(‘user’);

export default {
computed: {
…mapState([‘name’, ‘isAuthenticated’]),
…mapGetters([‘isLoggedIn’, ‘userName’])
},
methods: {
…mapMutations([‘setUser’, ‘clearUser’]),
…mapActions([‘login’, ‘logout’])
}
// 现在可以直接在组件中使用 this.name, this.isLoggedIn(), this.setUser(), this.login() 等
// 注意：这些都是 user 模块内的成员
}
“`

通过模块，我们可以将一个庞大的 Store 拆分成多个功能相关的子 Store，每个子 Store 负责管理其特定领域的状态和逻辑，极大地提升了大型项目的代码组织能力。

第四部分：Vuex 的工作流程

理解了核心概念后，我们将它们串联起来，看看 Vuex 的完整工作流程是怎样的：

组件触发操作： 当用户在组件中进行某个操作（如点击按钮）时，组件通常会分发 (Dispatch) 一个 Action。
Component -> store.dispatch('actionName', payload)
Action 执行： 被分发的 Action 执行其业务逻辑。这可能包括异步操作（如发起 API 请求）、数据处理、流程控制等。
Action
Action 提交 Mutation： Action 完成其异步或同步逻辑后，会提交 (Commit) 一个或多个 Mutation 来更改 State。Action 不能直接修改 State。
Action -> store.commit('mutationType', payload)
Mutation 修改 State： 被提交的 Mutation 是 Vuex 中唯一允许同步修改 State 的地方。Mutation 处理函数接收当前的 State 作为参数，并对其进行修改。
Mutation -> Modify State
State 更新与响应式： State 被修改后，由于 Vuex 的 State 是响应式的，所有依赖于该 State 的 Vue 组件（包括通过 mapState 或直接访问 this.$store.state 的组件）都会自动检测到状态变化。
State Updates -> Reactive System
组件视图更新： 响应式系统通知相关的组件，组件会重新计算其依赖的状态（包括 computed 属性和通过 mapState/mapGetters 映射的状态），并更新其视图以反映最新的 State。
Reactive System -> Component Updates -> UI Rerender

这个单向数据流使得状态变更的来源和过程清晰可追踪，极大地简化了调试工作。Vuex Devtools 更是能够记录每一次 Mutation 的提交，以及提交前后的 State 变化，甚至可以回溯到之前的状态，实现“时间旅行”调试。

第五部分：何时使用 Vuex？

Vuex 固然强大，但并非所有 Vue 应用都需要它。引入 Vuex 会增加一些开发上的概念和代码结构，对于小型应用来说，可能反而会增加不必要的复杂性。

那么，什么时候应该考虑使用 Vuex 呢？

多个组件共享同一状态： 当应用中有很多组件需要访问或修改同一个状态时，使用 Vuex 可以避免 prop drilling 或事件总线带来的混乱。
组件之间的通信复杂： 当非父子关系的组件需要频繁进行状态同步或通信时，Vuex 提供了一个更结构化、更易于管理的解决方案。
应用规模较大： 随着应用组件数量和状态数量的增加，局部状态和简单的通信方式变得难以维护。Vuex 提供了模块化和规范化的状态管理方式。
需要方便地追踪状态变更： 如果你需要一个清晰的、可追踪的状态变更日志来帮助调试，Vuex（尤其是配合 Devtools）是理想的选择。
需要实现时间旅行调试等高级功能： Vuex 的严格模式和 Devtools 提供了强大的调试能力。

不使用 Vuex 的场景：

应用非常简单： 组件数量少，层级不深，状态主要集中在几个根组件或少数几个组件内部，通过 props 和 $emit 能够轻松管理。
不需要跨组件共享状态： 大部分状态都是组件的局部状态，不需要与其他组件共享。

总的来说，如果你的 Vue 应用开始变得复杂，你发现自己难以追踪状态变化，或者组件间的通信变得混乱，那么就是时候考虑引入 Vuex 了。

第六部分：安装与基本使用（概念）

安装 Vuex 非常简单，通过 npm 或 yarn 即可：

“`bash
npm install vuex@next # Vue 3 版本

或者

yarn add vuex@next # Vue 3 版本

如果是 Vue 2

npm install vuex # Vue 2 版本

或者

yarn add vuex # Vue 2 版本
“`

安装完成后，你需要在应用中创建并使用 Store：

“`javascript
// src/store/index.js
import { createStore } from ‘vuex’; // Vue 3
// import Vuex from ‘vuex’; // Vue 2
// import Vue from ‘vue’; // Vue 2

// Vue 2 需要安装 Vuex 插件到 Vue 实例
// Vue.use(Vuex);

export default store;

// src/main.js 或 main.ts
import { createApp } from ‘vue’; // Vue 3
import App from ‘./App.vue’;
import store from ‘./store’;

const app = createApp(App); // Vue 3
// new Vue({ // Vue 2
// render: h => h(App),
// store // Vue 2 将 store 注入到 Vue 实例
// }).$mount(‘#app’);

app.use(store); // Vue 3 使用 app.use() 安装 Store
app.mount(‘#app’);
“`

通过将 Store 注入到 Vue 应用实例中，所有组件都可以通过 this.$store 访问到这个 Store 实例。

第七部分：总结

Vuex 是一个强大而成熟的状态管理库，专为 Vue.js 应用设计。它通过引入单一状态树 (State)、只读 State (通过 Getters 访问)、同步的 State 变更 (通过 Mutations 提交) 和异步的逻辑处理 (通过 Actions 分发)，提供了一个可预测、可维护的状态管理模式。模块化 (Modules) 能力进一步增强了 Vuex 在大型应用中的组织和扩展能力。

虽然引入 Vuex 会增加一定的学习成本和代码结构，但对于中大型、状态复杂的 Vue 应用来说，它带来的好处是巨大的：清晰的状态流、易于追踪的变更、更高的可维护性、以及配合 Devtools 提供的强大调试能力。

掌握 Vuex 的核心概念和工作流程，将帮助你更好地构建和管理复杂的 Vue.js 应用，提升开发效率和团队协作能力。在决定是否使用 Vuex 时，请权衡应用的规模和复杂性，选择最适合当前项目的解决方案。

希望本文能够帮助你深入理解 Vuex，并在你的 Vue.js 开发实践中灵活运用这一利器。

什么是 Vuex？Vue.js 状态管理介绍 – wiki基地

深入理解 Vuex：Vue.js 应用中的状态管理利器

第一部分：理解状态管理——为什么需要一个集中式仓库？

第二部分：什么是 Vuex？Vue.js 的官方状态管理库

第三部分：Vuex 的核心概念及其工作原理

第四部分：Vuex 的工作流程

第五部分：何时使用 Vuex？

第六部分：安装与基本使用（概念）

或者

如果是 Vue 2

或者

第七部分：总结

发表评论取消回复

深入理解 Vuex：Vue.js 应用中的状态管理利器

第一部分：理解状态管理——为什么需要一个集中式仓库？

第二部分：什么是 Vuex？Vue.js 的官方状态管理库

第三部分：Vuex 的核心概念及其工作原理

第四部分：Vuex 的工作流程

第五部分：何时使用 Vuex？

第六部分：安装与基本使用（概念）

或者

如果是 Vue 2

或者

第七部分：总结

发表评论 取消回复

发表评论取消回复