Vue3 入门-第十一篇：Vuex 状态管理初阶

第十一篇：Vuex 状态管理初阶

1. Vuex 基础概念

为什么需要状态管理

在小型 Vue 应用中，组件之间的状态共享和管理相对简单，可以通过组件间通信（如父子组件通过 props 和 $emit）来实现。然而，随着应用规模的扩大和复杂度的增加，这种方式会变得难以维护。例如，在一个大型电商应用中，多个组件可能需要共享购物车的状态（如商品列表、总价等），如果每个组件都通过父子组件通信来获取和更新购物车状态，代码会变得冗长且混乱，容易出现数据不一致的问题。

Vuex 提供了一种集中式的状态管理模式，将应用的共享状态抽取到一个单一的数据源（store）中进行管理。所有组件都可以从这个数据源获取状态，并且通过特定的规则来修改状态，使得状态的管理更加有序和可预测，提高了应用的可维护性和可扩展性。

Vuex 的核心概念（state、mutations、actions、getters）简介

1. state：Vuex 中的 state 用于存储应用的状态数据，它就像是一个全局的数据源。例如，在电商应用中，购物车的商品列表、用户的登录状态等都可以存储在 state 中。一个简单的 state 示例如下：