如何在Vuex的getters中实现返回值的延迟效果？

问题根因 #

你的代码无法正常运行主要有两个核心原因：

• Vuex getter被设计为同步计算属性，仅支持依赖state同步返回计算结果，本身不支持处理异步逻辑
• setTimeout的回调是异步执行的，回调内的return仅作用于回调函数本身，不会作为getter的返回值返回，因此myGetter最终返回值始终为undefined

正确实现方案 #

即使你没有修改原有state的需求，异步返回的结果也需要额外的state字段存储，因此必须用到action（处理异步逻辑）和mutation（修改state存储异步结果），具体实现如下：

1. 扩展state存储异步结果和加载状态 #

state: {
  myProperty1: '', // 你的原有状态字段
  delayedResult: null, // 存储延迟返回的结果
  isLoadingDelayedResult: false // 可选，用于标记加载状态
}

2. 定义mutation修改state值 #

Vuex规定仅能通过mutation修改state的值：

mutations: {
  SET_DELAYED_RESULT(state, result) {
    state.delayedResult = result
    state.isLoadingDelayedResult = false
  },
  SET_DELAYED_LOADING(state) {
    state.isLoadingDelayedResult = true
    state.delayedResult = null // 触发新的异步请求前清空旧结果
  }
}

3. 定义action处理异步延迟逻辑 #

异步操作必须放在action中执行：

actions: {
  getDelayedResult({ state, commit }) {
    commit('SET_DELAYED_LOADING')
    setTimeout(() => {
      let result = null
      if(state.myProperty1 === 'value1') {
        result = 'resultA'
      } else if(state.myProperty1 === 'value2') {
        result = 'resultB'
      }
      commit('SET_DELAYED_RESULT', result)
    }, 1000)
  }
}

4. 定义getter返回结果（可选） #

如果你仍需要通过getter获取结果，可按如下方式定义：

getters: {
  myGetter: state => state.delayedResult
}

组件使用方式 #

当你需要获取延迟结果时，主动触发对应action即可，state更新后getter会自动同步返回最新值：

<template>
  <div>
    <p v-if="$store.state.isLoadingDelayedResult">加载中...</p>
    <p v-else>{{ $store.getters.myGetter }}</p>
    <button @click="$store.dispatch('getDelayedResult')">获取延迟结果</button>
  </div>
</template>

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