NUXT 中的 SSR vuex 存儲

Question

我正在開發 vue2+nuxt 應用程序，我正在使用 vuex+persisted state 包。 在其中一個組件中，我根據狀態布爾變量顯示帶有條件的 div：

<template>
    <div class="nav__topbar" v-if="show">
         ....
    </div>
</template>
<script>
    export default {
        computed: {
            show() {
                return this.$store.state.navInfo.navInfo
            }
        }
    }
</script>

一切正常 - 如果this.$store.state.navInfo.navInfo為真，則顯示，否則顯示this.$store.state.navInfo.navInfo 。 同樣在刷新后它仍然有效。

我無法解決的唯一問題是，當刷新 div 顯示一秒后布爾值為 false 時。 說 0.2 秒后它消失了，但即使它如此之快，它仍然會使頁面“跳躍”，因為.nav__topbar是 100% 寬度和 20vh 高度。 因此，有一段時間我可以看到這個 div，然后它會隱藏並且所有頁面都跳起來，這看起來非常難看，我無法忽略它。

有什么辦法可以防止這種行為嗎？

---

也許我可以使用 Nuxt 提供的這個 fetch() 或 asyncData 鈎子？

Answer 1

在我發現這條評論之前，我在最后幾天遇到了同樣的問題

插件/persistedstate.js

import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
import cookie from 'cookie'

export default ({store, req, isDev}) => {
    createPersistedState({
        key: 'your_key',
        paths: ['state1', 'state2',...so_on],
        storage: {
            getItem: (key) => process.client ? Cookies.getJSON(key) : cookie.parse(req.headers.cookie||'')[key],
            setItem: (key, value) => Cookies.set(key, value, { expires: 365, secure: !isDev }),
            removeItem: (key) => Cookies.remove(key)
        }
    })(store)
}

nuxt.config.js

plugins: [
  { src: '~plugins/persistedstate.js' }
]

解決了我的問題，希望它也能解決你的問題。 我唯一認識到的是該函數現在在服務器和客戶端上都被調用。 將嘗試找出原因。

Answer 2

如果使用blackfaded 的解決方案，您應該在nuxt.config.js聲明插件時添加mode: 'client' ：

export default {
  plugins: [
    { src: '~plugins/persistedstate.js', mode: 'client' }
  ]
}

見https://fr.nuxtjs.org/guide/plugins/

（這是選項ssr: false的新版本）