Vuex状态管理实战技巧与项目应用经验分享

上官梓涵发布于 2026-03-17 12:26:02 框架阅读 2,929

原创

本文链接：https://www.jztheme.com/blog/framework/36104.html

上官梓涵

赞 9 收藏反馈

优化前：卡得不行

项目上线三个月，用户反馈越来越多，最常听到的就是“点不动”“转圈半天”“手机上直接卡死”。我自己拿安卓机试了下，首页加载列表从5秒到8秒不等，滑动过程中 Vuex 状态更新一卡一卡的，甚至有时候点个按钮要等两秒才有反应。这哪是现代前端应用，简直是2003年的网页体验。

一开始以为是接口慢，但查了下 network 面板，数据1秒内就回来了。问题显然不在后端。然后怀疑是组件渲染太多，拆了几个大组件也没见好转。最后把目光锁定了 Vuex —— 因为整个项目用了全局状态管理，所有列表、筛选、用户信息都塞在里面，store 文件都快3000行了。

找到瘼颈了！

我上了 Vue Devtools，切到 State 面板，发现每次点击一个筛选项，整个 store 树都会重新 computed 一遍，尤其是那个叫 getAllItems 的 getter，它依赖了一个巨大的 rawList，而这个 list 有上万条数据。更离谱的是，我在 mutations 里打了个 log，发现一个简单的 UI 切换（比如显示/隐藏弹窗）居然也触发了这个 getter —— 明明和它没关系。

这时候我意识到：不是 Vuex 慢，是我用得太糙了。getter 全是同步计算，没有缓存控制，组件还到处用 mapGetters 盲目绑定，导致一点点状态变动，全站响应式都在重算。

我还用了 Performance 面板录了一段操作：打开列表页 → 点击筛选 → 滑动页面。结果吓一跳：60% 的时间花在 JavaScript 上，其中超过一半是 getter 计算和组件 diff。这根本不是用户体验可接受的范围。

动手改：先砍掉无脑 computed

第一刀我砍向了那个万恶的 getAllItems getter。原来它是这样写的：

// 优化前
getters: {
  getAllItems: (state) => {
    return state.rawList
      .filter(item => item.status === 'active')
      .map(item => ({
        ...item,
        displayName: item.name || '未知'
      }))
      .sort((a, b) => a.sortIndex - b.sortIndex)
  }
}

问题在哪？每一条数据变动，哪怕只是某个 item 的 status 改了，整个数组都要重新 filter、map、sort。上万条数据，浏览器直接拉爆。

我把它改成按需计算 + 缓存键控制：

// 优化后
getters: {
  getAllItems: (state) => {
    const cacheKey = ${state.filterStatus}-${state.sortBy}
    if (state._cache[cacheKey]) {
      return state._cache[cacheKey]
    }

    let result = state.rawList

    if (state.filterStatus) {
      result = result.filter(item => item.status === state.filterStatus)
    }

    result = result.map(item => ({
      ...item,
      displayName: item.name || '未知'
    }))

    result.sort((a, b) => a[state.sortBy] - b[state.sortBy])

    // 缓存最多两个 key，避免内存爆炸
    state._cache = { [cacheKey]: result }
    return result
  }
}

同时在对应的 mutation 中清缓存：

mutations: {
  SET_FILTER_STATUS(state, status) {
    state.filterStatus = status
    // 清缓存，下一次调用 getter 会重建
    state._cache = {}
  },
  SET_SORT_BY(state, field) {
    state.sortBy = field
    state._cache = {}
  }
}

注意这里我没有用 LRU 或其他复杂结构，因为场景简单，清掉就行。而且 state._cache 不会被持久化，不影响业务逻辑。

组件别再乱监听了

另一个大问题是：很多组件其实只关心是否 loading，却通过 mapGetters 绑定了整个列表。比如这个 Header 组件：

// 优化前
computed: {
  ...mapGetters(['getAllItems', 'getUserInfo', 'isInitialized'])
},
watch: {
  getAllItems() {
    this.updateCount()
  }
}

即使 getAllItems 变了，Header 也不需要刷新，但它被绑了，所以每次列表变化它都 rerender。解决办法很简单：只监听你需要的状态。

// 优化后
computed: {
  isInitialized() {
    return this.$store.state.isInitialized
  },
  // 不再引入 getAllItems
},
methods: {
  updateCount() {
    const count = this.$store.getters.getAllItems.length
    this.localCount = count
  }
},
created() {
  // 手动触发一次，之后靠事件通知或防抖更新
  this.updateCount()
}

或者更进一步，用 shouldComponentUpdate 思路（Vue 里是 watch + immediate 控制），防抖更新：

watch: {
  isInitialized: {
    handler() {
      this.debounceUpdate()
    },
    immediate: true
  }
},
created() {
  this.debounceUpdate = this._debounce(() => {
    this.updateCount()
  }, 300)
}

这里的 _debounce 是自己封装的简易防抖，你也可以用 lodash。

异步操作别堵在 action 里

还有一个隐藏坑：action 里堆了太多同步逻辑。比如一个初始化 action：

// 优化前
actions: {
  async initApp({ commit, dispatch }) {
    await dispatch('fetchUser')
    await dispatch('fetchConfig')
    await dispatch('fetchItemList') // 三者其实无依赖
    commit('setInitialized', true)
  }
}

这三个请求明明可以并行，却串行执行，白白多花了2秒。改成 Promise.all：

// 优化后
actions: {
  async initApp({ commit, dispatch }) {
    await Promise.all([
      dispatch('fetchUser'),
      dispatch('fetchConfig'),
      dispatch('fetchItemList')
    ])
    commit('setInitialized', true)
  }
}

接口总耗时从 4.2s 降到 1.8s，效果立竿见影。

持久化也得小心

我们用了 vuex-persistedstate 把部分数据存 localStorage。但问题在于，每次 state 更新都同步写入，导致 IO 阻塞。特别是频繁变更的字段，比如临时表单数据。

解决方案：过滤掉不需要持久化的字段，并加个 debounce：

// 优化后
import createPersistedState from 'vuex-persistedstate'
import { _debounce } from '@/utils'

const debouncedSave = _debounce((key, value) => {
  localStorage.setItem(key, value)
}, 500)

export default new Vuex.Store({
  // ...
  plugins: [
    createPersistedState({
      storage: {
        getItem: (key) => localStorage.getItem(key),
        setItem: (key, value) => {
          debouncedSave(key, value)
        },
        removeItem: (key) => localStorage.removeItem(key)
      },
      reducer: (state) => ({
        user: state.user,
        config: state.config,
        // 去掉 rawList、_cache 等大字段
      })
    })
  ]
})

这样既保证关键数据落地，又避免频繁写入拖慢主线程。