Vuex传id的cardDetails组件无法渲染问题排查

你遇到的报错来自4个实际代码问题：

1. 模板中路由参数访问路径完全错误：$route.params下不存在props字段，写$route.params.props.id相当于在undefined上取id属性，直接触发类型错误。
2. 异步请求未完成时，Vuex里的event初始值是空对象，首次渲染直接访问event.time/event.date等属性同样会触发undefined错误。
3. 代码中引入了useStore组合式函数却未使用，直接导入单例store的写法在SSR等场景会出问题，属于不规范写法；另外从@vue/reactivity单独导入computed的写法会有响应式丢失风险，应该直接从vue包导入。
4. Vuex action未返回Promise实例，组件侧无法感知异步请求的完成时机，没法做加载状态、错误处理。

1. 修正组件模板 #

把错误的参数取值改掉，同时加渲染判断避免初始加载报错：

<template>
  <div class="event-card">
    <h2>You are on {{ id }}</h2>
    <template v-if="!loading && event">
      <span>@{{ event.time }} on {{ event.date }}</span>
      <h4>{{ event.title }}</h4>
      <p>{{ event.description }}</p>
    </template>
    <div v-if="loading">活动加载中...</div>
  </div>
</template>

注：这里直接用{{ id }}的前提是路由配置开启了props: true，会自动把路由路径里的:id参数映射为组件的id prop，和你控制台打印props.id能拿到值的逻辑对齐。如果没开路由props，就改成{{ $route.params.id }}。

2. 修正组件script逻辑 #

规范使用useStore获取store实例，补充加载状态处理：

<script>
import { computed, reactive, toRefs, onMounted } from "vue";
import { useStore } from "vuex";

export default {
  name: "EventDetails",
  props: ["id", "modelValue"],
  setup(props) {
    const store = useStore();
    const state = reactive({
      loading: false
    });

    onMounted(() => {
      state.loading = true;
      store.dispatch('fetchEvent', props.id).finally(() => {
        state.loading = false;
      });
    });

    const event = computed(() => store.state.event);

    return {
      event,
      ...toRefs(state)
    };
  },
};
</script>

3. 修正Vuex action #

给fetchEvent加上return，把请求Promise返回给组件侧：

// store代码中的fetchEvent action
fetchEvent({ commit }, id){
  // 加return返回Promise
  return apiClient.getEvent(id)
  .then((response) => {
    commit("SET_EVENT", response.data)
  })
  .catch((error) => {
    console.log(error);
    throw error;
  });
}

4. 确认路由配置 #

确保详情页路由配置正确开启props映射：

// 路由配置文件
const routes = [
  // ...其他路由
  {
    path: '/events/:id', // 路径参数名必须是id
    name: 'EventDetails',
    component: () => import('@/views/EventDetails.vue'),
    props: true // 开启props自动映射路由参数
  }
]

• EventList组件截图：
  
• 控制台报错截图：
  

内容的提问来源于stack exchange，提问作者Tomas Gil Amoedo