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 为真，则显示，否则消失。同样刷新后它仍然可以工作。

我无法解决的唯一问题是，当刷新 div 显示部分秒后布尔值为 false 时。它会在 0.2 秒后消失，但即使速度如此之快，它仍然会使页面“跳跃”，因为 .nav__topbar 是 100% 宽度和 20vh 高度。所以在几秒钟内我可以看到这个 div，然后它会隐藏起来，所有页面都会跳起来，这看起来很丑陋，我不能忽视这一点。

有没有办法防止这种行为？

---

也许我可以使用 Nuxt 提供的 fetch() 或 asyncData 挂钩？

Answer 1

如果使用blackfaded's solution，则在nuxt.config.js中声明插件时应添加mode: 'client'：

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

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

（是选项ssr: false的新版本）

Answer 2

在我找到this comment之前的最后几天我遇到了同样的问题

插件/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' }
]

解决了我的问题，我希望它也解决了你的问题。 我唯一认识到的是该函数现在在服务器和客户端上都被调用。将尝试找出原因。