0

我有一个在 SSR 中渲染得很好的组件，但是当 Vue 3 进行水合时会闪烁（我认为）。

<template>
    <ul class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
      <li v-for="recipe in recipes" :key="recipe.id" class="col-span-1 flex flex-col text-center bg-white rounded-lg shadow divide-y divide-gray-200">
        <div class="flex-1 flex flex-col">
          <img class="w-full flex-shrink-0 mx-auto bg-black rounded-t-lg" :src="recipe.imageUrl" alt="" />
          <h3 class="text-gray-900 text-sm font-medium p-4">
            
              {{ recipe.title }}
          </h3>
        </div>
      </li>
    </ul>
    <Pagination v-model="page" :records="totalRecords" :per-page="12" :options="paginationOptions" @paginate="fetchRecipes" />
  </template>
  
  <script>
  
  import Pagination from 'v-pagination-3'
  import axios from 'axios'

  export default {
  
    components: {
      Pagination,
    },
    inject: ['paginationOptions'],
    data() {
      return {
        section: 'home',
        recipes: [],
        page: 3,
        totalRecords: 0,
      }
    },
    created() {
    },
    mounted() {
      this.fetchRecipes(this.page)
    },
    methods: {
      async fetchRecipes(page) {
        try {
          const url = 'http://local-api.local/api/fakeApi'
          const response = await axios.get(url, { params: { page } }).then((response) => {
            this.recipes = response.data.data.map(recipe => ({
              title: recipe.title,
              imageUrl: `http://test-server.local${recipe.thumbnailUrl}`,
            }))
            this.totalRecords = response.data.total
          })
        }
        catch (err) {
          if (err.response) {
            // client received an error response (5xx, 4xx)
            console.log('Server Error:', err)
          }
          else if (err.request) {
            // client never received a response, or request never left
            console.log('Network Error:', err)
          }
          else {
            console.log('Client Error:', err)
          }
        }
      },
    },
    serverPrefetch() {
      return this.fetchRecipes(this.page)
    },
  }
  </script>

我究竟做错了什么？我一定已经尝试了 50 种设置方式this.recipes（在所有可能的生命周期挂钩中），但所有这些方式仍然会导致水合闪烁。

我正在使用 Vite（如果重要，可以使用 vite-ssr 插件）/Vue 3 SSR。请注意，闪烁后的组件似乎与 SSR 生成的版本相同，该版本在页面加载时显示（并且在源代码中）。

4

2 回答 2

2

我找到了解决方案。

我必须将所有数据放入 Vuex 存储（在组件中），然后在 main.ts 中，将其用作 initialState，当客户端加载时，用 initialState 值填充存储。

在 main.ts 中创建商店：

import { createStore } from 'vuex'
const store = createStore({
  state() {
    return {}
  },
})

在我的组件中，填写商店：

this.$store.state.pageContent = {
  recipes: response.data.data,
  totalRecords: response.data.total,
  totalPages: response.data.last_page,
  page,
}

然后在 main.ts 中，但在export default viteSSR()：

if (import.meta.env.SSR) {
    initialState.initial = store.state
}
else {
    for (const item of Object.entries(initialState.initial)) {
        store.state[item[0]] = item[1]
    }

    //check if the store is identical as teh one generated by SSR
    console.log(store.state)
}

请注意，如果您需要查看更多结构，我使用了这个 Vite SSR / Vue 3 样板项目：https ://github.com/frandiox/vitesse-ssr-template

于 2021-06-07T19:18:06.910 回答
0

在示例中，您的带有 api 结果的映射函数不包含 id。

            this.recipes = response.data.data.map(recipe => ({
              title: recipe.title,
              imageUrl: `http://test-server.local${recipe.thumbnailUrl}`,
            }))

这意味着:key=recipe.id绑定到undefined并且 vue 无法跟踪每条记录的更改。更改映射函数以包含 id

            this.recipes = response.data.data.map(recipe => ({
              id: recipe.id,
              title: recipe.title,
              imageUrl: `http://test-server.local${recipe.thumbnailUrl}`,
            }))

或者，如果我们愿意，只需包含整个对象

            this.recipes = response.data.data.map(recipe => ({
              ...recipe,
              imageUrl: `http://test-server.local${recipe.thumbnailUrl}`,
            }))

当然，这假设id开始时食谱上有一个属性。

于 2021-06-04T23:19:57.020 回答