VuePack状态管理实战：借助 Counter 示例彻底搞懂 Vuex、mutations 与 actions

VuePack状态管理实战借助 Counter 示例彻底搞懂 Vuex、mutations 与 actions【免费下载链接】vuepack:package: A modern starter which uses Vue 2, Vuex, Vue-router and Webpack 2 (and even Electron)项目地址: https://gitcode.com/gh_mirrors/vu/vuepackVuePack 是一个现代化的 Vue 2 脚手架项目开箱即用 Vue 2、Vuex、Vue Router 和 Webpack 2。本文将通过 VuePack 内置的 Counter 计数器示例带你从零搞懂 Vuex 状态管理的三大核心概念state、mutations 与 actions并学会把它们接入到自己的 Vue 应用中。 为什么选择 VuePack 来学习 Vuex很多新手学 Vuex 喜欢凭空搭项目结果卡在配置上。而 VuePack 已经把 vuex 和 vuex-router-sync 写进了依赖store、router、组件全部预配置好Vue 2 Vuex 2 Vue Router完整全家桶热重载修改 store 文件页面状态立即响应JSX 与单文件组件双写法同一个 Counter 组件同时提供 JSX 版本 和 Counter.vue 版本方便对照学习可选支持 Electron、ESLint、PostCSS 等详见 docs/ 目录也就是说你可以跳过所有环境配置直接读懂状态管理是怎么跑起来的。 Counter 示例一个按钮看懂三种操作Counter 组件是 VuePack 状态管理的演示窗口它在 首页视图 中被渲染。界面上有一个大数字以及三个按钮按钮触发的 Vuex 操作对应代码Incrementcommit(INCREMENT)同步 1Decrementcommit(DECREMENT)同步 -1Increment Asyncdispatch(incrementAsync)异步 1在 JSX 版本的 Counter 组件 中三个方法一一对应increment() { this.$store.commit(INCREMENT) } decrement() { this.$store.commit(DECREMENT) } incrementAsync() { this.$store.dispatch(incrementAsync) }记住两个动词就够用了commit→ 提交 mutation同步dispatch→ 派发 action异步️ state 与 mutations同步改数据的正确姿势打开 store 入口文件整个 Vuex 实例只有 33 行代码。1️⃣ state唯一的数据源const state { count: 0 }Vuex 的核心思想是Single Source of Truth所有需要共享的数据都集中在 state 里。Counter 组件展示的数字就是直接读取this.$store.state.count见 Counter 渲染部分。组件不自己持有数字只引用store——这就是响应式的来源state 一变界面自动更新。2️⃣ mutations修改 state 的唯一入口const mutations { INCREMENT(state) { state.count }, DECREMENT(state) { state.count-- } }新手最常犯的错误是直接在组件里改 state。Vuex 禁止这种做法所有修改必须走 mutations带来两个好处可追踪每次变更都有明确的方法名调试时一目了然可 DevTools 支持变更以提交记录形式被捕获Counter.vue 单文件版本 演示了更简洁的写法——直接在模板上click$store.commit(INCREMENT)连 methods 都省了。⚡ actions处理异步逻辑的规范写法mutations 里不允许异步操作。那延时加 1、请求接口后更新数据这类逻辑放哪答案是 actions。看 store 中的 actions 定义const actions { incrementAsync({ commit }) { setTimeout(() { commit(INCREMENT) }, 200) } }这里体现了一条清晰的分工链按钮 dispatch(incrementAsync) → action 处理等待 200ms 的异步逻辑 → action 内部 commit(INCREMENT) → mutation 真正修改 state → 界面数字更新记忆口诀actions 负责做事异步流程mutations 负责改数同步变更。你以后写接口请求、轮询、延时任务都套这个模式即可。 三步把 store 接入你的 Vue 应用理解组件之后看看 store 是如何通电到整个应用的。入口是 app.js导入 store 与 routerimport store from ./store同步路由与状态sync(store, router)——由 vuex-router-sync 完成让 store 里能感知当前路由这对根据登录路由恢复状态这类场景非常有用注入根实例new Vue({ router, store, ...App })只要 store 挂在了根实例上任意子组件都能通过this.$store访问这就是 Counter 组件无需 import 也能用 $store 的原因。️ 动手练习给你的 Counter 加一个重置功能按下面三步扩展验证你是否真的掌握了 Vuex 三件套在 store 文件 的 mutations 中新增RESET(state) { state.count 0 }在 Counter 组件 的 methods 中新增reset() { this.$store.commit(RESET) }在渲染函数里加一个 Reset 按钮绑定该方法如果想更进一步可以写一个 action 模拟从服务器加载初始值参考incrementAsync的写法。保存后热重载会自动生效数字会立刻归零。 小结概念一句话理解本项目示例state数据仓库count: 0mutations同步修改的唯一入口INCREMENT/DECREMENTactions异步逻辑的容器incrementAsynccommit / dispatch组件调用 store 的两个动词Counter 的三个按钮VuePack 用 33 行的 store 一个 Counter 组件浓缩了 Vuex 最核心的设计哲学。把它跑起来、改一改你就已经具备了在真实项目中使用 Vuex 的能力。【免费下载链接】vuepack:package: A modern starter which uses Vue 2, Vuex, Vue-router and Webpack 2 (and even Electron)项目地址: https://gitcode.com/gh_mirrors/vu/vuepack创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考