Vuex 4 快速入门从零构建你的第一个集中式状态管理 Store【免费下载链接】vuex️ Centralized State Management for Vue.js.项目地址: https://gitcode.com/gh_mirrors/vu/vuexVuex 是 Vue.js 官方的集中式状态管理模式与库而docs/guide/index.md这篇入门指南回答了一个核心问题如何创建并安装你的第一个 Vuex Store。本文以该入门指南为主体结合本仓库Vuex 4的源码实现、单元测试与经典 counter 示例系统讲解 Store 的两大设计原则、最简 Store 的完整搭建流程、store.state/store.commit的访问方式以及组件内this.$store的用法最终带你掌握在 Vue 3 应用中落地 Vuex 状态管理的完整实战路径。什么是 Store一切状态的中心容器在每一个 Vuex 应用的中央都站立着一个store存储容器。通俗地说store 就是一个盒子它装着你的应用状态state——即应用中所有需要被共享、驱动视图渲染的数据源。Vuex 的 store 与普通的全局对象global object有本质区别体现在两条核心设计原则上Vuex 的 store 是响应式的reactive。当 Vue 组件从 store 中读取状态时如果 store 的状态发生了变化组件会响应式地、高效地自动更新无需手动触发重渲染。你不能直接修改 store 中的状态。改变状态的唯一途径是显式地提交commit一个 mutation变更。这一约定保证了每一次状态变更都能留下可追踪的记录并让诸如日志记录、状态快照、时间旅行调试time travel debugging等工具成为可能。从源码层面看这两条原则有非常具体的落点。Vuex 4 中 Store 的响应式由 Vue 3 的reactiveAPI 承载在 src/store-util.js 的resetStoreState中store 的内部状态被包装为reactive({ data: state })并通过store.state的 getter 暴露出来见 src/store.js而只能通过 mutation 修改状态则由_withCommit标志位与严格模式守护commit()内部会先将this._committing置为true再依次执行所有 mutation handler见 src/store.js 与 src/store.js。在继续阅读之前需要说明本文代码示例采用 ES2015 语法包括import、const、箭头函数等这也是 Vuex 官方文档余下所有章节的统一风格。准备工作安装 Vuex 4在创建第一个 store 之前需要先安装 Vuex。由于本仓库是 Vuex 4面向 Vue 3 的版本官方提供了多种安装方式详见 安装指南通过包管理器安装推荐# npm npm install vuexnext --save # yarn yarn add vuexnext --save通过 CDN 直接引入在 Vue 之后引入vuex的构建文件它会自动完成安装script src/path/to/vue.js/script script src/path/to/vuex.js/scriptCDN 链接始终指向 NPM 上的最新 release如需指定版本可使用https://unpkg.com/vuex4.0.0/dist/vuex.global.js这类带版本号的 URL。使用开发版构建如果你希望使用最新的开发构建则需要克隆 Vuex 源码仓库并自行构建git clone https://github.com/vuejs/vuex.git node_modules/vuex cd node_modules/vuex yarn yarn build安装完成后即可通过import { createStore } from vuex引入createStore工厂函数。在 src/index.js 中可以看到Vuex 4 对外导出了createStore、Store、storeKey、useStore、mapState、mapGetters、mapActions、mapMutations、createNamespacedHelpers、createLogger等全部公共 API。创建最简 Storestate 与 mutations创建一个 Vuex store 非常简单直接只需提供一个初始状态对象和若干mutations变更。下面是最小的完整示例import { createApp } from vue import { createStore } from vuex // 创建一个新的 store 实例。 const store createStore({ state () { return { count: 0 } }, mutations: { increment (state) { state.count } } }) const app createApp({ /* your root component */ }) // 将 store 实例作为插件安装 app.use(store)注意这里有两个关键细节state是一个返回对象的函数而不是一个普通对象字面量。在 examples/classic/counter/store.js 中则直接使用了对象字面量写法const state { count: 0 }两种写法在根 store 中都可用但函数形式在多模块场景下能避免状态对象被多个模块共享引用。mutations中的每个 handler 接收state作为第一个参数并在其中直接修改状态——例如state.count。createStore只是new Store(options)的语法糖见 src/store.js。Store 构造器会依次完成初始化内部注册表_actions、_mutations、_wrappedGetters、_modules等、递归安装所有模块、初始化响应式状态、最后应用插件见 src/store.js。读取状态与提交变更store.state 与 store.commitstore 创建完成后你就可以通过store.state访问状态对象并通过store.commit触发状态变更store.commit(increment) console.log(store.state.count) // - 1这段代码的执行链路在源码中非常清晰store.commit(increment)会在_mutations表中查找increment对应的 handler 列表并在_withCommit的保护下依次执行随后通知所有订阅者subscribers见 src/store.js。commit还支持对象风格的调用这在 test/unit/store.spec.js 中有专门用例验证store.commit({ type: TEST, amount: 2 }) // 等价于 store.commit(TEST, { amount: 2 })这一写法由 src/store-util.js 中的unifyObjectStyle统一解析它同时服务于commit与dispatch并且在开发环境下会对非字符串的 type 抛出断言错误见 test/unit/store.spec.js 的对应测试。为什么必须 commit 而不是直接改store.state.count入门指南强调我们选择提交 mutation 而非直接修改store.state.count是因为我们想显式地追踪它。这个简单的约定让代码意图更加明确——阅读代码时你能一眼看出状态是在哪里、因为什么而改变的。更重要的是它为工具链打开了大门可以记录每一次 mutation、拍摄状态快照、甚至实现时间旅行调试。在仓库中mutation 的可追踪性有两个具体实现其一commit()执行后会调用this._subscribers.slice().forEach(sub sub(mutation, this.state))将 mutation 对象与最新状态广播给订阅者见 src/store.js这正是 devtool 插件 与日志插件工作的基础其二在开发模式下_withCommit标志位配合严格模式会在状态被非法修改时给出明确报错见 src/store-util.js 的enableStrictMode。在 Vue 组件中使用 storethis.$store在 Vue 组件中你可以通过this.$store访问到 store 实例然后像下面这样在组件方法中提交 mutationmethods: { increment() { this.$store.commit(increment) console.log(this.$store.state.count) } }this.$store的注入发生在Store.install方法中当执行app.use(store)时Vuex 会通过app.provide(injectKey || storeKey, this)将 store 提供给整个组件树同时将其挂载到app.config.globalProperties.$store上见 src/store.js这就是任意层级的组件都能拿到this.$store的原因。默认的storeKey就是字符串store见 src/injectKey.js。用计算属性读取响应式状态在组件中使用 store 状态的推荐方式是在 computed 属性计算属性中返回该状态因为 store 的状态本身就是响应式的而触发变更则是在组件方法中提交 mutationcomputed: { count () { return this.$store.state.count } }这背后的响应式链路是store 状态被reactive()包装组件中的计算属性读取它时建立依赖一旦 mutation 修改了状态依赖它的计算属性会自动重新求值进而驱动视图更新。仓库中的 examples/classic/counter/Counter.vue 给出了一个完整的实战范本模板中直接用{{ $store.state.count }}渲染状态通过mapGetters与mapActions辅助函数把 getter 映射为计算属性、把 action 映射为方法对应的 examples/classic/counter/app.js 展示了标准的挂载流程createApp(Counter)→app.use(store)→app.mount(#app)。完整的 counter store含increment、decrement、incrementIfOdd、incrementAsync等动作见 examples/classic/counter/store.js。背后的原理响应式与可追踪性的源码印证入门指南反复强调的两个特性可以在源码中找到完整印证响应式Reactive。resetStoreState使用reactive({ data: state })包装根状态并将 getters 包装为基于computed的惰性缓存属性——为避免 getter 在组件卸载时被销毁还特意用effectScope承载这些 computed见 src/store-util.js。这就是组件读取 store 状态后能响应式高效更新的实现基础。可追踪Trackable。除了commit广播订阅者之外store 还提供了subscribe与subscribeAction方法见 src/store.js让插件可以监听每一次 mutation 与 action 的生命周期replaceStatesrc/store.js则在_withCommit保护下显式替换整个状态树——这正是状态快照与时间旅行调试能力得以存在的前提。小结与下一步入门指南用一句话总结了 Vuex 的使用心智模型在组件中使用 store 状态就是在计算属性中返回该状态触发变更就是在组件方法中提交 mutation。围绕 store 的两个核心特性——响应式读取、显式提交变更——你已经可以写出第一个可用的 Vuex 应用。入门之后官方指南按以下顺序深入讲解每个核心概念你可以顺着阅读State状态——在组件与mapState中访问状态的完整方式Getters派生状态——像计算属性一样对 store 状态做派生与复用Mutations变更——提交载荷payload、对象风格提交与响应式规则Actions动作——异步操作与组合 dispatchModules模块——把大型 store 拆分为命名空间模块Plugins插件——订阅 mutation/action 实现日志、持久化等能力Strict Mode严格模式——强制所有状态变更必须发生在 mutation 中组合式 API 用法——在script setup中通过useStore消费 storeTypeScript 支持 与 从 Vuex 3 迁移到 4完整的 API 说明可查阅 API 参考文档。此外本仓库的 examples/classic 与 examples/composition 目录下还提供了 counter、chat、shopping-cart、todomvc 等可直接运行参考的完整示例应用可以作为你动手实践的最佳样板。【免费下载链接】vuex️ Centralized State Management for Vue.js.项目地址: https://gitcode.com/gh_mirrors/vu/vuex创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考