当前位置：首页 > news >正文

【Vue2 ✨】Vue2 入门之旅 · 进阶篇（八）：Vuex 内部机制

news 2025/9/13 12:42:24

在前几篇文章中，我们了解了 Vue Router 的原理与功能。本篇将深入探讨 Vuex 的内部机制，帮助你更好地理解 Vuex 如何管理应用的全局状态。

什么是 Vuex

Vuex 是 Vue.js 官方提供的状态管理库，用于在 Vue 应用中集中管理 所有组件的状态。它使得我们可以通过一个全局的状态管理机制，方便地进行组件间的数据共享和更新。

Vuex 适用场景：

在多个组件之间共享状态。
管理复杂的组件数据流。
在大型单页应用中管理全局状态。

Vuex 的核心概念

Vuex 的核心思想是 单一数据源，即应用的所有状态都存储在一个 store 中。它提供了几个主要概念：

State：应用的状态，存储所有的数据。
Getters：对 state 的计算和派生数据，类似于组件中的计算属性。
Mutations：用于修改 state 的唯一方式，且必须是同步的。
Actions：用于提交 mutations 的方法，支持异步操作。
Modules：当应用状态变得复杂时，可以将 store 分割成多个模块，每个模块有自己的 state、mutations、actions 和 getters。

在这里插入图片描述

Vuex 的工作原理

Vuex 的工作原理是基于 状态集中式管理，它通过以下机制将状态管理与 Vue 组件的视图绑定：

1. State（状态）

所有的状态数据都会存储在 Vuex 的 state 中，所有组件都可以访问这个单一的状态树。

const store = new Vuex.Store({state: {count: 0}
})

2. Getters（派生状态）

Getters 是 Vuex 中用于从 state 计算和派生数据的方式。它们类似于 Vue 的计算属性，并且是缓存的，只有依赖的 state 改变时才会重新计算。

const store = new Vuex.Store({state: {count: 0},getters: {doubleCount(state) {return state.count * 2}}
})

3. Mutations（同步修改状态）

Mutations 是唯一能改变 Vuex 状态的方式。它们必须是同步的，并且通过提交（commit）来触发。

const store = new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++}}
})

触发 mutation：


store.commit('increment')

4. Actions（异步操作）

Actions 用于处理 异步操作，并在异步操作完成后提交 mutations 来改变 state。与 mutations 不同，actions 可以包含异步操作。

const store = new Vuex.Store({actions: {incrementAsync({ commit }) {setTimeout(() => {commit('increment')}, 1000)}}
})

触发 action：

store.dispatch('incrementAsync')

Vuex 的状态流

Vuex 的状态流是单向的，从而确保数据流动的清晰与可预测。Vuex 的状态流包括：

组件通过 mapState 或 this.$store.state 访问状态，读取状态数据。
组件通过 commit 提交 mutations，修改 state 中的状态。
组件通过 dispatch 调用 actions，进行异步操作，并最终通过 mutations 修改 state。
组件通过 mapGetters 或 this.$store.getters 访问 getters，获取计算得到的数据。

Vuex 强制将数据流动和修改分开，遵循以下原则：

state 只应通过 mutations 修改。
actions 可以进行异步操作，最终通过 mutations 来修改 state。
getters 用于派生数据，不直接修改 state。

Vuex 的模块化管理

随着应用规模的增大，Vuex 的状态管理会变得越来越复杂。这时，Vuex 提供了 模块化 的方案，让我们能够将 store 分成多个模块，每个模块有自己的 state、mutations、actions 和 getters。

模块化的配置：

const store = new Vuex.Store({modules: {moduleA: {state: {count: 0},mutations: {increment(state) {state.count++}},actions: {incrementAsync({ commit }) {setTimeout(() => {commit('increment')}, 1000)}}}}
})