Vue3组件setup中如何仅首次加载时执行函数？

你的问题核心是每次组件挂载时都会重新调用getApi()触发接口请求，覆盖了store中你修改后的任务数据。要实现仅首次加载获取数据，关键是避免重复触发接口请求，可以从两个层面处理：

方案一：在Vuex Action中控制请求逻辑（推荐） #

直接在task/getTasks这个Action里加判断：如果store里已经有任务数据，就不再发起API请求。这样不管组件挂载多少次，只要数据存在就不会重复请求，从根源解决问题。

修改你的Action代码：

// store/modules/task.js
actions: {
  async getTasks({ state, commit }) {
    // 已有数据直接返回，不请求接口
    if (state.tasks?.length) {
      return;
    }
    // 无数据时才调用fake API
    const response = await yourFakeApi.get('/tasks'); // 替换成你的实际请求代码
    commit('SET_TASKS', response.data);
  }
}

组件里的代码不需要改动，每次调用getApi()时，Action会自动判断是否需要请求。

方案二：在组件内判断后再发起请求 #

如果不想修改Action，也可以在组件的setup里先检查store中的数据，只有不存在时才调用接口：

修改组件的setup代码：

setup(){
  const store = useStore();
  
  async function getApi(){
    const existingTasks = store.state['task'].tasks;
    // 已有数据就不请求了
    if (existingTasks?.length) {
      return;
    }
    await store.dispatch('task/getTasks');    
  }
  getApi()

  const tasks = computed(()=> store.state['task'].tasks)
  
  return{tasks}
}

补充：支持手动刷新的场景 #

如果之后需要手动刷新任务数据，可以给Action加个强制刷新的参数：

// Action代码
async getTasks({ state, commit }, forceRefresh = false) {
  // 非强制刷新且已有数据时，直接返回
  if (!forceRefresh && state.tasks?.length) {
    return;
  }
  const response = await yourFakeApi.get('/tasks');
  commit('SET_TASKS', response.data);
}

// 需要刷新时，组件里这么调用
// await store.dispatch('task/getTasks', true);

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