使用Vuex更新跨视图共享教师列表状态的最优方案是什么？

你提到的第二种方案方向是正确的，核心逻辑是把数据拉取的判断逻辑收敛到Vuex内部，避免散落在各个业务组件中，针对你提到的场景还可以做一些边界优化，最终实现方案如下：

优化点说明 #

• 避免重复请求：增加加载状态锁，处理两个视图同时初始化时重复发起接口请求的问题
• 逻辑完全收敛：业务组件不需要做任何数据存在性判断，只需要调用统一的预加载action即可
• 预留扩展能力：可根据后续需求增加数据过期刷新、错误兜底等逻辑，不需要修改业务组件代码

完整代码实现 #

Vuex状态定义 #

// state 部分
const state = () => ({
  teachers: [],
  // 加载状态锁，避免重复请求
  isTeachersLoading: false,
  // 可选：上次拉取时间戳，用于后续需要定时刷新的场景
  teachersLastFetched: null
})

Mutation定义 #

const mutations = {
  SET_TEACHERS(state, teacherList) {
    state.teachers = teacherList
    state.teachersLastFetched = Date.now()
  },
  SET_TEACHERS_LOADING(state, status) {
    state.isTeachersLoading = status
  }
}

封装专用Action #

const actions = {
  async ensureTeachersLoaded({ state, commit }) {
    // 已有数据直接返回
    if (state.teachers.length) return

    // 正在请求中则等待请求完成，避免重复发起请求
    if (state.isTeachersLoading) {
      return new Promise(resolve => {
        const stopWatch = watch(
          () => state.isTeachersLoading,
          (loading) => {
            if (!loading) {
              stopWatch()
              resolve()
            }
          }
        )
      })
    }

    // 无数据也无请求中，发起接口调用
    commit('SET_TEACHERS_LOADING', true)
    try {
      // 替换为你的实际接口请求逻辑
      const { data } = await fetch('/api/teachers').then(res => res.json())
      commit('SET_TEACHERS', data)
    } catch (err) {
      // 可自定义错误处理逻辑，比如全局提示
      console.error('教师列表拉取失败：', err)
    } finally {
      commit('SET_TEACHERS_LOADING', false)
    }
  }
}

组件调用方式 #

任意需要用到教师列表的视图组件，只需要在初始化时调用一次action即可，不需要额外判断：

// 视图组件中（Options API写法）
async mounted() {
  await this.$store.dispatch('ensureTeachersLoaded')
  // 后续直接使用state.teachers或者对应的getter即可
}

如果是使用setup语法的Vue3组件，对应调整为useStore的调用方式即可。

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