Vuex基础使用存取值+异步&请求后台

State（状态）:

State 即应用的状态，是存储在 Vuex 中的数据。在 Vuex 的 store 中，所有的状态都被集中存储。

State 是响应式的，当 State 的数据发生变化时，相关的组件将自动更新。

Getter（获取器）:

Getter 类似于组件中的计算属性。它们的作用是对 Store 中的 State 进行一些处理，然后输出处理后的结果。

Getter 可以接受其他 Getter 作为第二个参数。

Mutation（突变）:

Mutation 是 Vuex 中更改 State 的唯一方式。Mutation 必须是同步函数，用于改变 State 中的数据。

每个 Mutation 都有一个字符串的事件类型（type）和一个回调函数，回调函数就是实际进行状态更改的地方。

在组件中提交 Mutation 的方法是 this.$store.commit('mutationType')。

Action（动作）:

Action 类似于 Mutation，不同之处在于 Action 提交的是 Mutation，而不是直接变更状态。

Action 可以包含任意异步操作。通过 Action 可以提交多个 Mutation。

在组件中分发 Action 的方法是 this.$store.dispatch('actionType')。

Module（模块）:

在大型应用中，单一的 State 树很容易被各种功能模块儿淹没。Module 允许我们将 State 分割成模块，每个模块有自己的 State、Getter、Mutation 和 Action。

模块内部的 Mutation 和 Action 可以接收和操作模块内部的局部状态。

1.3 使用Vuex的优势

使用Vuex的主要优势包括：

集中式管理：Vuex通过单一的存储仓库来管理应用程序的状态，使状态变化可追踪和可维护。

数据共享：可以轻松地在不同的组件之间共享和传递状态数据，而不需要通过组件之间的繁琐的通信手段。

开发工具支持：Vue.js的开发工具提供了对Vuex的强大支持，可以方便地查看状态快照、时间旅行调试等。

可测试性：由于Vuex的状态管理是纯粹的，你可以更容易地编写单元测试来验证你的状态和逻辑。

1.4 Vuex中各个js文件的用途

在一个典型的Vuex项目中，通常会有一些不同的JavaScript文件，每个文件都有特定的用途。以下是这些文件的一般用途：

store.js：

用途：这是Vuex的核心文件，包含了Vuex的Store实例的配置和创建。

内容：

导入Vue和Vuex库。

导入模块（如果有多个模块）。

创建Vuex的Store实例，配置state、mutations、actions、getters等。

导出Store实例，以便在Vue应用程序中使用。

state.js（可选）：

用途：将应用程序的状态（state）单独抽取到一个文件中，以便更好地组织和维护状态数据。

内容：仅包含应用程序的状态数据。

mutations.js（可选）：

用途：将突变（mutations）函数单独抽取到一个文件中，以便更好地组织和维护状态变更逻辑。

内容：包含突变函数，这些函数用于同步修改状态。

actions.js（可选）：

用途：将动作（actions）函数单独抽取到一个文件中，以便更好地组织和维护异步操作逻辑。

内容：包含动作函数，这些函数用于执行异步任务并触发突变来修改状态。

getters.js（可选）：

用途：将获取器（getters）函数单独抽取到一个文件中，以便更好地组织和维护状态的派生数据。

内容：包含获取器函数，这些函数用于从状态中获取计算属性。

modules/ 文件夹（可选）：

用途：当应用程序变得复杂时，可以将Vuex的Store模块化，将不同模块的状态、突变、动作和获取器分别放在不同的文件中，以便更好地组织和管理代码。

内容：包含不同模块的state.js、mutations.js、actions.js和getters.js等文件，用于组织和管理不同模块的代码。

以上文件的具体结构和文件名可以根据项目的需求和组织方式来定制，但这种组织方式有助于保持代码的可维护性和可读性，并更好地分离关注点。

1.5 Vuex各组件

1.5.1 图解

最低0.47元/天解锁文章

200万优质内容无限畅学