Nuxt.js 中使用 useHydration 实现数据水合与同步

<template>
  <div>
    <h1>用户列表</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>
 
<script>
import { ref, onMounted } from '@nuxtjs/composition-api';
import { useHydration } from 'vue-ssr-hydration';
 
export default {
  setup() {
    const users = ref([]);
    const { hydrated } = useHydration({ users });
 
    onMounted(async () => {
      // 假设 fetchUsers 是一个异步函数，用来获取用户数据
      users.value = await fetchUsers();
    });
 
    return {
      users,
      hydrated, // 确保服务器渲染的数据能被客户端正确地水合
    };
  },
};
</script>

这个例子展示了如何在 Nuxt.js 应用中使用 vue-ssr-hydration 插件来确保服务端渲染的初始数据能够在客户端被正确地水合。useHydration 函数确保了 users 数组在客户端和服务端保持同步。