Vue 3 Vuex 如何强制回调函数异步执行以规避状态变更同步报错

以下是三个可直接落地的方案，按适用场景排序：

• 方案1：调整监听器执行时机
  给监听模式变量的watcher添加flush: 'post'配置即可，该配置会让回调等到当前所有响应式更新、DOM更新队列全部执行完毕后再触发，完全避开Vuex的状态修改锁定期。
  示例代码：

  import { watch } from 'vue'
  import { useStore } from 'vuex'
  
  const store = useStore()
  watch(
    () => store.state.appMode,
    () => {
      // 执行你的f()逻辑
      f()
    },
    { flush: 'post' }
  )
  

  不想修改watcher配置的话，也可以用nextTick包裹f()的调用：

  import { nextTick, watch } from 'vue'
  import { useStore } from 'vuex'
  
  const store = useStore()
  watch(
    () => store.state.appMode,
    async () => {
      await nextTick()
      f()
    }
  )
  

• 方案2：通过Vuex订阅机制触发回调
  直接在Vuex实例上订阅mutation执行完成事件，匹配到修改模式变量的mutation后再执行f()，这种方式完全在Vuex的状态更新周期外触发回调，不会触发状态修改冲突：

  // 可写在store初始化完成的位置，或者组件setup中
  store.subscribe((mutation, state) => {
    // 把SET_APP_MODE替换为你修改模式变量的实际mutation名称
    if (mutation.type === 'SET_APP_MODE') {
      f()
    }
  })
  

• 方案3：把逻辑整合到Vuex Action中
  如果f()是全局通用逻辑，建议直接封装为action，在action里先提交修改模式的mutation，再执行后续的其他状态修改逻辑，action本身支持连续提交多个mutation，不会触发报错：

  // store内部的action定义
  const actions = {
    changeAppMode({ commit }, newMode) {
      commit('SET_APP_MODE', newMode)
      // 后续f()逻辑，需要修改状态直接commit对应mutation即可
      commit('OPEN_SIDEBAR')
      // 路由切换也可以直接在这里实现
      router.push('/target-route')
    }
  }
  // 调用时直接dispatch该action，不要直接commit修改模式的mutation
  store.dispatch('changeAppMode', 'newModeValue')
  

额外提示：不要在计算属性中执行带副作用的逻辑，计算属性的设计定位是派生无副作用的状态值，在里面写修改状态、切换路由这类操作本身不符合Vue设计规范，也容易引发各类响应式冲突。

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