使用vuex管理项目history

这篇内容是在有道云旧笔记基础上重新整理的 Vue/Vite 工程实践 笔记。原始记录偏碎片化，这里补充了使用场景、阅读顺序和落地时需要注意的边界，方便以后在项目里快速复用。

适用场景 ​

• Vue/Vite 项目中遇到配置、组件封装、构建或运行时问题时，作为排查入口。
• 需要把一次性调试经验沉淀成团队内可复用的前端工程实践。
• 迁移旧项目或升级依赖时，用来对照检查环境变量、插件和组件行为差异。

核心要点 ​

• 正文以代码或命令片段为主，阅读时建议先确认目标问题，再挑选对应片段验证。
• 保留了 1 段可直接参考的代码或命令，主要涉及 javascript，复制前需要按当前项目路径、版本和变量名做调整。

import { STORE } from '@/config/conf'

export default {
  state: {
    history: []
  },
  mutations: {
    SET_POP: (state) => state.history.pop(),
    SET_PUSH: (state, route) => state.history.push(route)
  },
  actions: {
    back: ({ state }) => {
      const history = state.history
    },
    record: ({ state, commit }, route) => {
      const history = state.history

      // Reloading same page
      if (history.length && history[history.length - 1].name === route.name) {
        commit('SET_POP')
        commit('SET_PUSH', route)
        return false
      }
      // Going back
      if (history.length > 1 && history[history.length - 2].name === route.name) {
        commit('SET_POP')
        return false
      }

      commit('SET_PUSH', route)
      if (history.length + 1 >= STORE.HISTORY.length) {
        commit('SET_POP')
      }
      return true
    }
  }
}

// 使用方法 router.js 中
// 添加历史记录
 store.dispatch('record', to)

实践检查清单 ​

• 先确认 Vue、Vite、Node、包管理器版本，再判断示例是否需要按当前工程结构调整。
• 涉及构建或插件配置时，建议同时验证开发环境和生产构建结果。
• 涉及 UI 或浏览器行为时，至少在桌面端和移动端各验证一次关键路径。

复盘小结 ​

这篇笔记更适合作为问题排查或方案落地前的速查材料。后续如果在真实项目中再次遇到同类问题，可以继续把具体版本、报错信息、最终取舍和验证结果补到对应小节里，让它从代码片段逐步沉淀成完整方案。