在本地存储的异步操作期间无法用数据加载 UI

Question

当我点击某个“任务”时，它会正确加载，并显示带有数据的正确 UI。错误恰恰发生在通过浏览器输入窗口点击链接时——

localhost:port/task/edit/id

，或者当我手动刷新每个“任务”的页面时。我该如何解决这个问题？

router.js：

{
            path: '/task/edit/:id',
            name: 'edit-task',
            component: EditView,
},

代码示例，带有 EditView：

<template>
  <div>
    <task-edit :task="task" v-if="task" :key="taskId"/>
    <p v-else>Loading task...</p>
  </div>
</template>

<script>

export default {
  name: 'EditView',
  components: {
    TaskEdit,
  },
  computed: {
    ...mapState(['tasks']),
    taskId() {
      return this.$route.params.id;
    },
    task() {
      return this.tasks.find((task) => task.id === this.taskId);
    },
  },
  async created() {
    await this.$store.dispatch('retrieveTaskById');
  },
};
</script>

store.js 带有加载任务的操作：

...
  retrieveTaskById({ state }, taskId) {
        console.log('Loading task from localStorage...');
        state.tasks.find(task => {
            console.log(task.id, 'Task loaded')
            return task.id === taskId
        });
    },
...

这是我手动导航到“编辑”页面时 console.logs 的输出：

正在从本地存储加载任务...

这是我从“主页”页面导航时的输出：

正在从本地存储加载任务... 1 '任务已加载'