Vuex Store中使用setInterval避免状态在mutation外变更的正确方法

错误根因 #

你的写法违反了Vuex的核心设计规则：Mutation只能执行同步状态修改，禁止包含定时器、异步请求这类延后执行的逻辑。
你把setInterval写在Mutation内部，定时器回调触发时已经脱离了Mutation的执行上下文，回调中直接修改state.api.data的操作会被Vuex检测为「在Mutation处理函数之外变更状态」，因此抛出报错。另外你的原代码还存在未调用clearInterval直接置空定时器ID的问题，会导致旧定时器一直在后台运行，造成内存泄漏。

修复方案 #

按照「异步/定时逻辑放Action，所有状态修改必须走Mutation」的原则调整代码即可：

1. 调整mutations.js，拆分独立的状态修改逻辑

// mutations.js
const mutations = {
  SET_API_ENDPOINT (state, payload) {
    // 清除之前的定时器
    if (state.api.interval !== null) {
      clearInterval(state.api.interval)
      state.api.interval = null
      state.api.data = {}
    }
    // 重置API基础参数
    state.api.endpoint = payload.endpoint
    state.api.requestType = payload.requestType
    state.api.payload = payload.payload
  },
  // 存储接口返回数据
  SET_API_DATA(state, data) {
    state.api.data = data
  },
  // 存储新定时器ID
  SET_API_INTERVAL(state, intervalId) {
    state.api.interval = intervalId
  },
  // 可选：单独封装清除定时器的逻辑，方便组件卸载时调用
  CLEAR_API_INTERVAL(state) {
    if (state.api.interval) {
      clearInterval(state.api.interval)
      state.api.interval = null
      state.api.data = {}
    }
  }
}

2. 将定时器、接口请求逻辑全部移到actions.js中

// actions.js
const actions = {
  async setAPIEndpoint ({ commit, state }, payload) {
    // 先更新API基础配置、清除旧定时器
    commit('SET_API_ENDPOINT', payload)
    
    // 启动新的轮询任务
    const intervalId = setInterval(async () => {
      if (state.api.requestType === 'post') {
        try {
          const response = await axios.post(`/api/${ state.api.endpoint }`, state.api.payload)
          // 所有状态修改必须通过commit调用Mutation，禁止直接修改state
          commit('SET_API_DATA', response.data)
        } catch (error) {
          process.env.NODE_ENV === 'production' ? location.href = 'pages/error-500/' : console.log(error)
        }
      }
    }, state.api.refreshTimer)
    
    // 存储新定时器ID到state
    commit('SET_API_INTERVAL', intervalId)
  },
  // 可选：封装清除轮询的action，组件卸载时调用
  async clearAPIEndpoint({ commit }) {
    commit('CLEAR_API_INTERVAL')
  }
}

额外建议 #

如果组件卸载、页面切换后不需要继续轮询，可在组件的beforeUnmount钩子中调用store.dispatch('clearAPIEndpoint')停止轮询，避免不必要的资源消耗。

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