nuxt3开发记录

记录1

问题：ssr前后端渲染不一致，后端渲染时没有数据，导致刷新页面数据异常，但是通过前端点击是正常的。

原因：要正常识别ssr需要页面中使用的数据就是接口返回的响应式数据，这样才能做到后端渲染接口返回数据。我在开发中页面上使用的响应式数据是自己在页面中定义的ref​，接口返回数据作为赋值，导致后端渲染时接口还未返回数据。

修改：要么直接使用useFetch​返回的data，要么在页面上用useAysncData​，进行包装一层。建议在页面包装一层，接口返回数据往往需要在pinia​中处理一遍才能用，比如判断code​等等，如果直接使用useFetch​数据，会很难看。因此包装一层useAsyncData​自由度更高，更易于处理，这样接口可以统一使用$fetch​，不需要考虑是ssr还是csr。

案例：

//hottestComponent.vue
const { post_id } = toRefs(props);
const hot_post = ref<Post[]>([]);
//页面上渲染的是hot_post，后端渲染时没有数据，因此报错
const data = await get_hottest_post(post_id.value);
if (data) {
  hot_post.value = data;
}

//hottestComponent.vue
//修改后代码将接口包装进useAsyncData，页面上渲染的数据就是接口返回的ref数据，保持了后端渲染。
const { data: hot_post, pending } = await useAsyncData('hottest-post-list', () => get_hottest_post(props.post_id), { server: true });

if (!pending.value && !hot_post.value) {
  hot_post.value = [];
}

记录2

增加过渡动画和页面进度条

进度条

在nuxtpage​标签上面增加一个NuxtLoadingIndicator​标签即可。

<!-- 在页面导航之间显示一个进度条 -->
<NuxtLoadingIndicator />
<NuxtPage style="margin-top: 1.714em" />

过渡动画

在nuxt.config.ts​中增加如下选项。

//nuxt.config.ts
export default defineNuxtConfig({
  app: {
    pageTransition: { name: 'page', mode: 'out-in' },
  }
});

然后在app.vue中增加如下css即可完成

.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}

记录3

为自己新建的文件夹配置自动导入，在nuxt.config.ts中增加import选项，如下：

//nuxt.config.ts
export default defineNuxtConfig({
  imports: {
    dirs: ['stores/**', 'api/**'],
  },
});

‍