直接访问/刷新任务编辑页时，localStorage异步加载UI失败的解决方法

问题根源 #

1. 未传递任务ID参数：调用retrieveTaskById action时没有传入当前路由的taskId，导致action无法定位要加载的任务。
2. Action未真正从LocalStorage加载数据：现有retrieveTaskById只是在已有的state.tasks中查找，没有从LocalStorage读取数据并更新状态，直接访问/刷新时state.tasks为空，自然找不到任务。
3. 类型不匹配（潜在问题）：路由参数taskId是字符串类型，如果任务的id是数字，===严格相等会匹配失败。

解决步骤 #

1. 修正Action调用，传递任务ID #

在EditView的created钩子中，调用dispatch时传入当前的taskId：

async created() {
  await this.$store.dispatch('retrieveTaskById', this.taskId);
}

2. 修复Action逻辑，从LocalStorage加载并更新状态 #

修改store中的retrieveTaskById action，确保它从LocalStorage读取数据并更新state：

retrieveTaskById({ commit }, taskId) {
  console.log('Loading task from localStorage...');
  // 从LocalStorage获取存储的任务列表
  const savedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
  // 查找目标任务（统一类型避免匹配失败）
  const targetTask = savedTasks.find(task => String(task.id) === taskId);
  
  if (targetTask) {
    // 更新state中的tasks（需对应定义SET_TASKS mutation）
    commit('SET_TASKS', savedTasks);
    console.log(targetTask.id, 'Task loaded');
  } else {
    console.log('Task not found in localStorage');
  }
}

同时添加对应的mutation：

mutations: {
  SET_TASKS(state, tasks) {
    state.tasks = tasks;
  }
}

3. 确保应用初始化时加载LocalStorage数据 #

为了避免直接访问页面时state.tasks为空，在根组件App.vue的created钩子中预先加载所有任务：

// App.vue
async created() {
  await this.$store.dispatch('loadAllTasks');
}

对应的store action：

loadAllTasks({ commit }) {
  const savedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
  commit('SET_TASKS', savedTasks);
}

4. 统一ID类型匹配 #

在EditView的computed属性中，将任务ID转为相同类型后再匹配：

task() {
  return this.tasks.find((task) => String(task.id) === this.taskId);
}

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