微信小程序集成Vuex，状态管理实战全攻略

搞微信小程序开发的朋友，十有八九都遇到过这种场景：页面 A 里用户选了个城市，跳到页面 B 填表单，再回到页面 A，刚才选的城市就丢了。或者更崩溃的，几个页面都要用同一个用户信息，却每个页面都得重新请求一次接口。这时候你就会明白，状态管理这事儿，逃不掉。Vuex 在 Web 端是标配，但在小程序里怎么集成，网上资料东一榔头西一棒子，今天咱们就把这事儿说透。

先说说为什么小程序需要 Vuex。小程序每个页面都是独立的 WebView，数据没法共享，跨页面传参只能通过 URL 或者全局变量。全局变量看着省事，但要手动管理读写，还得保证页面销毁重建时数据仍在。Vuex 的好处是集中存储、响应式更新，数据变了所有引用它的组件会自动刷新。而且 Vuex 有严格的数据流——通过 actions 提交 mutations 修改 state，调试时能追踪每一步变化。这对复杂业务场景来说，不是锦上添花，而是刚需。

具体怎么集成？先装包。在小程序项目根目录下运行 `npm init -y` 初始化，然后 `npm install vuex --save`。注意，小程序不支持直接 `import Vuex`，得用构建工具。推荐使用 mpvue 或 uni‑app 这种基于 Vue 的框架，它们天然支持 Vuex。如果你用的是原生小程序开发，就需要手动引入打包后的 Vuex 文件。我踩过的坑是：别图省事直接复制 web 端的 Vuex 源码，小程序环境不支持一些 DOM API，会报错。稳妥的做法是去 Vuex 官方 GitHub 下载 `dist/vuex.js`，放到项目的 `utils` 目录下。

接下来创建 store。在项目根目录建个 `store` 文件夹，里面放 `index.js`。代码大致如下：先 `import Vue from 'vue'`、`import Vuex from 'vuex'`，再 `Vue.use(Vuex)`。注意，mpvue 框架里 Vue 是内置的，直接引用即可。state 里定义共享数据，例如 `userInfo、cityList`；mutations 写同步修改逻辑，actions 写异步操作，比如 `wx.request` 请求接口。getters 用来计算派生数据，例如根据用户 ID 过滤列表。写的时候有个小技巧：把 state 拆成多个模块，按业务功能分文件，在 `index.js` 里 import 合并，避免 store 文件膨胀到几百行。

集成到小程序里需要改入口文件。在 `main.js` 中，创建 Vue 实例时传入 store：`new Vue({ store }).$mount()`。这样所有页面和组件都能通过 `this.$store` 访问。但这里有个坑：小程序页面不是 Vue 组件，没法直接用 `this.$store`。解决办法是使用 mpvue 的 Page 构造器或 mixins 注入。比如在 `app.vue` 里写一个全局 mixin，把 `$store` 挂到每个页面的 data 上；或者在每个页面的 computed 中手动映射，例如 `computed: { userInfo() { return this.$store.state.userInfo } }`。后者更清晰，但代码会重复，需根据项目规模权衡。

实战场景最能说明问题。假设你的小程序有购物车功能，商品列表页点击“加入购物车”，购物车页面需要显示数量。传统做法是每个页面各自维护一个数组，通过全局变量或本地缓存同步，容易出现数据不一致。用 Vuex 就简单了：state 里定义 `cartList` 数组，mutations 写 `addCart` 方法，接收商品对象后 `push` 进去。商品列表页点击按钮时 `dispatch` 一个 action，action 再调用 mutation。购物车页面直接在 computed 中绑定 `state.cartList`，数据变化会自动更新。而且 Vuex 的 devtools 插件可以调试，哪一页触发了加购、传了什么参数，一目了然。

还有一种情况是用户登录态管理。用户授权后拿到 `openId` 和 `token`，很多页面都需要用到。如果用全局变量，页面刷新就会丢失，还得重新调接口。Vuex 配合小程序的 storage 做持久化：登录成功后把 `userInfo` 存入 state，同时 `wx.setStorageSync` 保存一份。每次小程序启动时，在 `app.vue` 的 `onLaunch` 里从 storage 读取并 `commit` 到 state。这样用户关掉小程序再打开，登录态仍在。注意别把敏感信息直接放在 state，`token` 用 storage 保存，state 只存一个 `isLogin` 布尔值即可。

调试和优化也不能忽视。Vuex 的调试依赖 devtools，但小程序环境不支持浏览器插件。可以自己写个日志插件，在 store 的 `plugins` 数组里加一个函数，每次 mutation 触发时 `console.log` 出新的 state。或者使用 mpvue 的调试工具，它能追踪 store 变化。性能方面，state 里的数据不要太深，嵌套超过三层就需要考虑用 normalizr 扁平化。别在 getters 里做复杂计算，比如遍历大数组排序，每次 getter 重新计算会卡顿，这种情况应该把计算结果缓存到 state 里。

说个很多人忽略的点：小程序分包场景下的 Vuex。如果小程序超过 2 MB，就需要分包。主包里的 store 可以被子包访问，但子包页面如果用了 store，必须确保主包已经加载完成。解决办法是在子包页面里加判断，如果 `this.$store` 不存在，就跳转到主包页面重新初始化；或者在主包的 `app.vue` 中把 store 挂到 `getApp()` 上，子包通过 `getApp().$store` 访问。虽然有点绕，但能保证数据一致性。Vuex 在小程序里不是银弹，却能让状态管理变得可预测、可维护。动手试一次，你会发现之前那些头疼的跨页面数据问题，原来这么简单。