Vuex 是什么？怎么用？一文带你吃透！

在前端开发的世界里,Vue.js 凭借其简洁易用的特性收获了众多开发者的喜爱，而当项目逐渐复杂，组件之间的状态管理变得棘手时，Vuex 就如同一位得力助手，为我们解决了状态共享的难题，那 Vuex 究竟是什么？又该如何使用呢？别急，下面就为你详细解答。

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，它就像是一个大仓库，把各个组件需要共享的状态都存放在这里，方便统一管理和取用。

为什么要用 Vuex？

想象一下,当你的 Vue 项目中有多个组件需要共享某个数据（比如用户的登录状态、购物车的商品数量等），如果只是通过 props 层层传递或者事件总线来处理，会变得非常繁琐且难以维护，而 Vuex 提供了一种更高效、更清晰的方式来管理这些共享状态，它让状态的变化可追踪、可调试，提高了代码的可维护性和可扩展性。

Vuex 的核心概念

（一）State

State 就是存储状态的地方，它是一个对象，在 Vue 组件中，可以通过 `this.$store.state` 来访问，比如我们定义一个 `count` 状态：

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

然后在组件中就可以这样获取：

```html ```

（二）Getter

Getter 可以理解为 State 的计算属性，它的作用是对 State 中的数据进行加工处理后再返回，比如我们有一个数组 `todos`，我们想获取其中已完成的数量：

```javascript const store = new Vuex.Store({ state: { todos: [ { id: 1, text: 'Learn Vuex', done: true }, { id: 2, text: 'Build project', done: false } ] }, getters: { doneTodosCount: state => { return state.todos.filter(todo => todo.done).length } } }) ```

在组件中通过 `this.$store.getters.doneTodosCount` 就能获取到已完成的数量。

（三）Mutation

Mutation 是唯一可以修改 State 的地方，它必须是同步函数，我们通过提交 Mutation 来改变 State，比如我们要增加 `count` 的值：

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

在组件中这样提交：

```javascript this.$store.commit('increment') ```

（四）Action

Action 类似于 Mutation，但是它可以包含异步操作，Action 提交的是 Mutation，而不是直接修改 State，比如我们模拟一个异步请求后增加 `count`：

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

在组件中通过 `this.$store.dispatch('incrementAsync')` 来触发。

（五）Module

当应用变得非常复杂时,我们可以将 Vuex 的 Store 分割成模块（Module），每个模块都有自己的 State、Getter、Mutation 和 Action，比如我们有一个 `user` 模块和一个 `product` 模块：

```javascript const moduleA = { state: () => ({...}), getters: {...}, mutations: {...}, actions: {...} }

const moduleB = { state: () => ({...}), getters: {...}, mutations: {...}, actions: {...} }

const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } })

store.state.a // -> moduleA 的状态 store.state.b // -> moduleB 的状态

## 四、Vuex 的基本使用步骤
### （一）安装 Vuex
<p>如果是通过 npm 安装，执行 `npm install vuex --save`；如果是通过 yarn 安装，执行 `yarn add vuex`。</p>
### （二）创建 Store
<p>在项目中创建一个 `store` 目录，然后在其中创建 `index.js` 文件，编写如下代码：</p>
```javascript
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  // 在这里定义 State、Getter、Mutation、Action 等
})
export default store

（三）在 Vue 项目中引入 Store

在 `main.js` 中引入并挂载：

```javascript import Vue from 'vue' import App from './App.vue' import store from './store'

new Vue({ store, render: h => h(App) }).$mount('#app')

### （四）在组件中使用
<p>按照前面介绍的 State、Getter、Mutation、Action 的使用方法，在组件中进行状态的获取、修改等操作。</p>
## 五、实际项目中的应用场景
### （一）多组件共享用户信息
<p>在一个电商项目中，用户的登录信息（如用户名、头像、会员等级等）需要在多个页面（首页、个人中心、购物车等）展示，这时就可以把用户信息存储在 Vuex 的 State 中，各个组件通过 `this.$store.state.userInfo` 来获取，当用户信息发生变化（比如用户登录、退出或更新个人信息），通过提交 Mutation 来修改 State。</p>
### （二）购物车状态管理
<p>在购物车功能中，商品的数量、选中状态等，可以在 Vuex 中定义 `cartItems` 状态，`addItem`（添加商品到购物车）、`updateItemCount`（更新商品数量）等 Mutation，`checkout`（结算，可能涉及异步操作，如调用支付接口）等 Action，这样，无论是商品详情页添加到购物车，还是购物车页面修改数量，都能统一管理状态。</p>
## 六、
<p>Vuex 作为 Vue.js 的状态管理工具，为我们处理复杂项目中的状态共享问题提供了强大的支持，通过掌握 State、Getter、Mutation、Action 和 Module 这些核心概念，按照安装、创建、引入和使用的步骤，我们可以在实际项目中灵活运用 Vuex，让我们的代码更加清晰、可维护，希望这篇文章能帮助你更好地理解和使用 Vuex，在前端开发的道路上更进一步。</p>