Vue3 onMounted钩子中Pinia异步方法未同步执行求助

下面是针对代码中问题的逐一排查和修复：

1. Pinia Store 未导出store变量 #

在useCommentStore.js中，虽然定义了store响应式变量，但return语句里没有包含它，导致组件通过storeToRefs无法获取到这个变量，页面自然无法渲染。

修复后的useCommentStore.js：

import axios from 'axios';
import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useCommentStore = defineStore('comment', () => {
  const comments = ref([]);
  const store = ref({});

  const getComments = (storeId) => {
    // 返回Promise让await生效
    return axios.get(`/stores/${storeId}?_embed=comments`).then((res) => { 
      comments.value = res.data.comments; 
      store.value = res.data; 
    });
  };

  // 将store加入返回对象
  return {
    comments, store, getComments,
  };
});

2. getComments未返回Promise，导致await无效 #

原代码中getComments内部调用了axios请求，但没有返回这个Promise，组件里的await getComments(...)不会等待请求完成，不仅console.log会提前执行，页面也无法及时响应数据更新。

修复点：在axios.get前添加return，让函数返回Promise，确保await能等待请求结束。

3. 组件中导入Store的名称错误 #

页面里导入的是useStoreStore，但实际导出的Store名称是useCommentStore，这会导致无法正确获取Store实例。

修复后的page.vue：

<template>
  {{ store }}
</template>

<script setup>
import { onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
// 修正导入的Store名称
import { useCommentStore } from '@/stores/useCommentStore';

const commentStore = useCommentStore();
const { comments, store } = storeToRefs(commentStore);
const { getComments } = commentStore;

onMounted(async () => {
  const route = useRoute();
  await getComments(route.params.id);
  // 访问Ref对象的实际值需要取.value
  console.log(store.value, comments.value);
});
</script>

4. 补充：访问Ref值需要取.value #

原代码中的console.log(store, comments)打印的是Ref包装对象，要查看实际数据需要访问.value属性。

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