Vuex 全局状态管理

一、先搞懂：什么是 “全局状态”？

可以把 全局状态 = 整个项目共享的数据

这些数据不应该只属于某一个页面，而是整个 APP 都能访问、都能修改。

比如：

• 用户登录信息（头像、昵称、token）
• 购物车数量
• 主题颜色（暗黑 / 白天）
• 全局弹窗、加载状态
• 多个页面都要用到的公共数据

二、为什么要用 Vuex？（解决什么痛点？）

Vuex 就是为了解决：

让所有页面共享一套数据，统一管理、统一修改、自动同步。

不用 Vuex 会遇到的问题：

1. 页面之间传值太麻烦（父子、兄弟、跨页面传值写死你）
2. 数据到处散落，这个页面存一份，那个页面改一下，容易乱
3. 数据无法同步，A 页面改了，B 页面不知道
4. 代码难以维护，后期不知道数据从哪来、到哪去

一句话总结：Vuex = 项目里的 “公共数据仓库”

三、Vuex 核心 5 个概念（超级好记）

我给你简化成最容易理解的版本：

1. State（唯一数据源）

• 作用：存数据
• 就像组件里的 data()，但它是全局的
• 所有页面都能从这里拿数据

js

state: {
  userInfo: {}, // 用户信息
  cartCount: 0  // 购物车数量
}

2. Getters（计算属性）

• 作用：从 state 里加工数据
• 相当于全局的 computed

js

getters: {
  getUserNickname: state => state.userInfo.nickname
}

3. Mutations（唯一修改数据的地方）

• 作用：修改 state
• 必须是同步函数（不能写异步）
• Vuex 规定：只能通过 mutation 修改 state

js

mutations: {
  SET_USER_INFO(state, data) {
    state.userInfo = data
  }
}

4. Actions（处理异步 + 提交 mutation）

• 作用：处理异步操作（请求接口、定时器）
• 自己不直接改数据，而是提交 mutation 去改
• 相当于 “业务逻辑层”

js

actions: {
  async login({ commit }, userData) {
    // 1. 发请求（异步）
    let res = await api.login(userData)
    // 2. 提交 mutation 修改 state
    commit('SET_USER_INFO', res.data)
  }
}

5. Modules（模块化）

• 项目大了，把 Vuex 拆成多个模块
• 比如：user、cart、setting 等

---

四、Vuex 工作流程（最重要！一张图看懂）

plaintext

组件页面
   ↓（想改数据）dispatch 触发
Actions（异步请求/逻辑）
   ↓（提交）commit 触发
Mutations（唯一能改数据）
   ↓ 修改
State（全局数据）
   ↓ 数据更新
所有用到数据的页面 **自动更新**

**超级口诀：**组件调用 dispatch → 走 actions → 提交 commit → 走 mutations → 改 state → 页面自动刷新

---

五、最常用代码示例（直接复制就能用）

1. 定义 Vuex 仓库

js

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token: '',
    userInfo: null
  },
  getters: {
    getToken: state => state.token
  },
  mutations: {
    SET_TOKEN(state, val) {
      state.token = val
    },
    SET_USER_INFO(state, data) {
      state.userInfo = data
    }
  },
  actions: {
    // 登录
    async userLogin({ commit }, formData) {
      // 模拟请求
      let res = { token: '123456', user: { name: '张三' } }
      commit('SET_TOKEN', res.token)
      commit('SET_USER_INFO', res.user)
    }
  }
})

2. 页面使用（拿数据 + 改数据）

vue

<!-- 页面组件 -->
<template>
  <div>{{ userInfo }}</div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  computed: {
    ...mapState(['userInfo', 'token'])
  },
  methods: {
    login() {
      // 调用 vuex 的 action
      this.userLogin({ account: 'test', pwd: '123' })
    },
    ...mapActions(['userLogin'])
  }
}
</script>

---

六、你必须记住的 3 条规则

1. state 只读，不能直接改

   js

   // ❌ 错误
   this.$store.state.token = 'xxx'
   
   // ✅ 正确
   this.$store.commit('SET_TOKEN', 'xxx')
   

2. 异步操作必须放 actions（请求、延时等）

3. 修改数据唯一入口是 mutations

---

七、一句话终极总结

Vuex 就是给整个 Vue 项目用的 “公共数据管家”，统一存、统一改、所有页面自动同步。

---

关键点回顾

1. State：存数据
2. Getters：计算数据
3. Mutations：同步改数据（唯一入口）
4. Actions：异步逻辑，提交 mutation
5. 流程：组件 → dispatch → action → commit → mutation → state → 页面更新