Vue-理解 vuex
一、前言
在开发中大型 Vue 应用时，我们常常会遇到多个组件之间共享数据、通信复杂的问题。例如：
多个组件需要访问同一个用户信息；组件之间需要传递状态或事件；数据变更需要同步更新多个组件；
这时，Vuex 就派上用场了。它是 Vue 官方推荐的状态管理模式，专为 Vue.js 应用程序开发提供集中式存储管理。
本文将带你深入了解：
什么是 Vuex？Vuex 的核心概念（State、Getter、Mutation、Action、Module）；如何在 Vue 项目中安装和使用 Vuex；实际开发中的典型使用场景；Vuex 在 Vue 2 和 Vue 3 中的差异；推荐的最佳实践；
二、什么是 Vuex？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
简单来说，Vuex 就是一个全局的“仓库”，所有组件都可以从这个仓库中读取或修改数据，从而实现跨组件的状态共享。
三、为什么需要 Vuex？
✅ 没有 Vuex 的问题：
父子组件传值靠 props / $emit；兄弟组件之间传值要通过共同父级；深层嵌套组件传值困难；多个组件依赖相同状态，难以维护；
✅ 使用 Vuex 的优势：
优势描述集中式管理所有组件共享一个状态源单向数据流更加清晰的数据流向可维护性高所有状态变更都在 store 中统一处理调试友好支持 Vue Devtools，方便查看状态变化提升开发效率减少不必要的 props 和 events 传递
四、Vuex 的核心概念
Vuex 主要有五个核心模块：
1. State：状态（数据）
用于保存应用程序的状态，是驱动应用的数据源。
state: {
count: 0,
user: null
}
2. Getter：获取状态（计算属性）
类似于 Vue 的 computed 属性，用于对 state 做一些派生处理。
getters: {
doubleCount(state) {
return state.count * 2
}
}
3. Mutation：更改状态的方法（同步操作）
唯一可以修改 state 的方式，必须是同步函数。
mutations: {
increment(state) {
state.count++
},
setUser(state, user) {
state.user = user
}
}
4. Action：异步操作状态
用于处理异步逻辑（如请求 API），提交 mutation 来改变状态。
actions: {
async fetchUser({ commit }, userId) {
const res = await getUserById(userId)
commit('setUser', res.data)
}
}
5. Module：模块化组织
当项目变得庞大时，可以将 store 分割成模块，每个模块拥有自己的 state、getter、mutation、action。
modules: {
userModule,
cartModule
}
五、如何在 Vue 项目中使用 Vuex
步骤 1：安装 Vuex
npm install vuex@next --save
注意：如果你使用的是 Vue 2，请使用 vuex@3 版本。
步骤 2：创建 Store 实例
// src/store/index.js
import { createStore } from 'vuex'
export default createStore({
state: {
count: 0
},
getters: {
doubleCount: state => state.count * 2
},
mutations: {
increment(state) {
state.count++
}
},
actions: {
incrementAsync({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
},
modules: {}
})
步骤 3：挂载到 Vue 实例
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
createApp(App).use(store).mount('#app')
步骤 4：在组件中使用 Vuex
当前计数：{{ count }}
双倍计数：{{ doubleCount }}
📌 说明：
使用 mapState、mapGetters、mapMutations、mapActions 可简化写法；也可以直接使用 $store.state.xxx 或 $store.dispatch() 直接调用。
六、Vuex 在 Vue 2 与 Vue 3 中的区别
功能Vue 2（Vuex 3）Vue 3（Vuex 4）创建 Store 方式new Vuex.Store({})createStore({})使用方式Vue.use(Vuex)app.use(store)Composition API 支持需配合 useStore完全支持组合式 APITypeScript 支持支持更好地支持推荐程度✅ 旧项目可用✅ 新项目推荐使用
七、Vuex 的实际应用场景
场景示例用户登录状态管理存储 token、用户信息购物车状态共享多页面/组件共享购物车数据多组件间通信不同层级组件共享数据表单状态管理保存表单输入、校验结果全局加载状态显示 loading 动画国际化语言切换存储当前语言并响应变化
八、Vuex 最佳实践建议
建议说明保持 State 只读不能直接修改 state，只能通过 mutationMutation 必须同步异步操作应放在 Action 中Action 提交 MutationAction 负责执行异步逻辑后提交 mutation合理拆分 Module避免 store 过于臃肿使用命名空间模块化时启用 namespace 提高可维护性封装 map 辅助函数提高代码简洁性和可读性配合 Vue Devtools查看状态变化、调试更高效不滥用 Vuex小型项目可考虑使用 reactive / ref 替代
九、总结对比表
概念是否同步是否可直接修改 state是否推荐使用State❌❌✅Getter✅❌✅Mutation✅✅（唯一方式）✅Action✅（内部异步）❌（通过提交 mutation 修改）✅Module✅✅✅（大项目必备）
十、结语
感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！
王者荣耀李白攻略：新手到高手必看的绝妙技巧与连招测评一下几款 Windows 上免费的邮箱软件