解决Vue组件直接访问或刷新页面时数据加载失败的问题

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    tasks: [], // 假设这是从localStorage或其他地方加载的全部任务列表
    retrievedTaskById: null, // 新增：用于存储通过ID检索到的单个任务
  },
  mutations: {
    // 新增：用于设置检索到的任务
    setRetrievedTaskById(state, payload) {
      state.retrievedTaskById = payload;
    },
    // 假设有其他mutation来加载初始tasks数组
    setTasks(state, tasks) {
      state.tasks = tasks;
    }
  },
  actions: {
    // 异步加载所有任务（例如从localStorage）
    async loadAllTasks({ commit }) {
      // 模拟从localStorage加载数据
      return new Promise(resolve => {
        setTimeout(() => {
          const storedTasks = JSON.parse(localStorage.getItem('tasks') || '[]');
          commit('setTasks', storedTasks);
          resolve();
        }, 100); // 模拟异步加载
      });
    },
    // 改进后的retrieveTaskById action
    async retrieveTaskById({ state, commit, dispatch }, taskId) {
      // 确保tasks数组已经加载。如果未加载，先加载
      if (state.tasks.length === 0) {
        await dispatch('loadAllTasks'); // 确保所有任务已加载
      }

      const task = state.tasks.find(task => String(task.id) === String(taskId)); // 确保类型匹配
      commit('setRetrievedTaskById', task); // 通过mutation更新状态
    },
  },
  getters: {
    // 新增：用于获取检索到的任务
    retrievedTaskById: (state) => state.retrievedTaskById,
  },
});

// 示例：在应用初始化时加载所有任务到localStorage
// 实际应用中，这可能在App.vue的created钩子中或路由守卫中完成
if (!localStorage.getItem('tasks')) {
  localStorage.setItem('tasks', JSON.stringify([
    { id: '1', name: 'Task A', description: 'Description A' },
    { id: '2', name: 'Task B', description: 'Description B' },
    { id: '3', name: 'Task C', description: 'Description C' },
  ]));
}

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

<script>
import { mapGetters } from 'vuex'; // 如果需要使用mapGetters辅助函数

export default {
  name: 'EditView',
  components: {
    // 假设TaskEdit组件已经定义并导入
    TaskEdit: {
      props: ['task'],
      template: '<div><h3>编辑任务: {{ task.name }}</h3><p>{{ task.description }}</p></div>'
    },
  },
  computed: {
    // 从路由参数中获取任务ID
    taskId() {
      return this.$route.params.id;
    },
    // 使用mapGetters或直接访问getter来获取已检索的任务
    ...mapGetters(['retrievedTaskById']), // 方式一：使用mapGetters
    // task() { // 方式二：直接访问
    //   return this.$store.getters.retrievedTaskById;
    // }
    task() {
      return this.retrievedTaskById; // 使用mapGetters后的属性
    }
  },
  async created() {
    // 在组件创建时，派发Action并传入taskId
    // 使用await确保数据加载完成后再进行后续操作
    await this.$store.dispatch('retrieveTaskById', this.taskId);
  },
  // 可以在beforeRouteUpdate或watch $route来处理ID变化时的重新加载
  watch: {
    '$route.params.id': {
      immediate: true, // 立即执行一次
      handler(newId, oldId) {
        if (newId && newId !== oldId) {
          this.$store.dispatch('retrieveTaskById', newId);
        }
      }
    }
  }
};
</script>