Ethan's Notes

Appearance

Vuex ​

1. 为什么需要 Vuex？ ​

在复杂的单页面应用（SPA）中，多个组件往往需要共享同一个状态：

  • 多视图依赖同一状态： 比如“用户信息”在侧边栏、头像和设置页面都要用到。
  • 不同视图的行为需要变更同一状态： 比如在“购物车”页面修改数量，导航栏的“总价”要实时更新。

如果没有 Vuex，你只能通过繁琐的 props 传参或自定义事件（Event Bus）来传递数据，这在项目变大时会变成一场维护噩梦。

2. Vuex 的核心流程 (The Cycle) ​

Vuex 的工作流遵循“单向数据流”理念，由四个核心部分组成：

  1. State（状态）： 驱动应用的数据源（类似于 data）。
  2. View（视图）： 以声明方式将 State 映射到视图。
  3. Actions（动作）： 响应 View 上的用户输入，提交 Mutations（常用于处理异步逻辑，如调用后端接口）。
  4. Mutations（变化）： 更改 State 的唯一方法（必须是同步函数）。

3. 使用 ​

3.1 基本流程 ​

  1. 引入依赖
  2. 在src/store/index.js里面写好管理的对象及其管理逻辑
  3. 在其他地方引用对象，并分同步异步进行管理

3.2 语法 ​

  1. store/index.js 语法

    image-20260328095416525

    1. 其他地方引用对象语法：

      vue
      {{$store.state.name}}

    2. 其他地方使用方法语法：

      • 调用mutations方法（同步）：this.$store.commit('setname','李四')，第一个参数是mutations方法名，第二个参数是该方法需要的参数（state是内置参数，不用传）
      • 调用actions方法（异步）：this.$store.dispatch('setNameByAxios')，和上方不同的是，actions方法需要调用dispatch

4. 总结 ​

vuex的state的概念类似于全局变量，这个是Vuex（Vue3叫Pinia）的核心，在整个应用中都可以使用该变量，vuex还提供了管理该变量的方法。

image-20260328100214132