Nuxt.js切换路由后Vuex State未重置的问题排查

核心问题 #

Vuex 是全局状态容器，页面跳转后状态不会自动销毁，因此再次进入表单页面时 activeStep 会保留上次的数值；而在 beforeMount 中直接重置状态，会干扰组件的渲染时序，导致过渡动画无法正常触发。

方案一：改用组件局部状态（推荐，除非需要全局共享） #

多步骤表单的步骤状态属于页面局部状态，无需全局共享时，直接将 activeStep 放在组件的 data 中即可。页面跳转后组件销毁，重新进入时状态会自动初始化：

export default {
  data() {
    return {
      activeStep: 1 // 局部状态，每次进入页面自动重置为1
    }
  },
  methods: {
    goToNextStep(step) {
      this.activeStep = step
    }
  }
}

模板部分无需改动，过渡动画会正常工作——因为状态变化是在组件挂载后触发的，符合 transition 组件的触发条件。

方案二：Vuex 状态下的正确重置方式 #

如果必须用 Vuex 管理状态，避免在 beforeMount 中直接修改，改用路由守卫或页面 created 钩子来重置：

1. 添加重置状态的 Vuex 方法

// Vuex Store
export const actions = {
  resetFormState({ commit }) {
    commit('resetStep')
    // 若有其他表单字段需要重置，可在此添加对应的commit
  }
}

export const mutations = {
  resetStep(state) {
    state.activeStep = 1
  },
  // 原有的setStep方法保留
  setStep(state, step) {
    state.activeStep = step
  }
}

2. 在表单页面组件中调用重置
   使用路由守卫 beforeRouteEnter（精准控制路由进入时机），或直接在 created 钩子中执行：

export default {
  created() {
    this.$store.dispatch('resetFormState')
  },
  // 路由守卫写法
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.$store.dispatch('resetFormState')
    })
  }
}

为什么 beforeMount 重置会导致动画失效？ #

beforeMount 是组件挂载前的钩子，此时组件的 DOM 还未生成，直接修改 Vuex 状态会让组件初始化时就渲染 Step1，没有状态变化的过程，transition 组件无法捕捉到状态切换的时机，因此动画不触发。而在 created 或路由守卫中重置，组件已经完成初始化，状态变化会被 transition 组件正常监听，动画就能正常执行。

内容的提问来源于stack exchange，提问作者Chinese_hacker_lm