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

在前几篇文章中，我们了解了 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)
        }
      }
    }
  }
})

通过模块化的方式，Vuex 可以使得状态管理更加清晰和可维护。

小结

Vuex 提供了集中式的状态管理，使得多组件间的状态共享更加简单。
核心概念：state（状态）、getters（派生状态）、mutations（同步修改）、actions（异步操作）。
Vuex 的状态流是单向的，确保了数据流动的清晰与可预测。
通过模块化管理，Vuex 可以适应大型应用的需求，使得状态管理更加灵活和可维护。

📗 下一篇进阶文章，我们将学习 Vue2 性能优化，了解如何优化 Vue 应用的性能，提升用户体验。

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

目录