Question

我正在开发vue2 + nuxt应用程序，并且正在使用vuex + persisted状态包。在其中一个组件中，我根据状态布尔变量显示具有条件的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为true，则显示它消失。而且刷新后仍然可以使用。

我无法解决的唯一问题是，刷新div显示后的boolean值为false时，显示的时间为秒。在说了.2秒后，它消失了，但是即使如此之快，它仍然会使页面“跳跃”，因为.nav__topbar的宽度为100％，高度为20vh。因此，在不到一秒钟的时间内，我可以看到此div，然后将其隐藏，所有页面都跳起来，看起来非常难看，我不能忽略它。

有什么办法可以防止这种行为？

也许我可以利用Nuxt提供的fetch（）或asyncData挂钩？

Answer 1

最近几天我遇到了同样的问题，直到找到this comment

plugins / persistedstate.js

require 'rest-client'
endpoint = "/my/url"
headers = {'Authorization' => "Basic #{Base64.encode64("mycreds")}", 'Accept' => 'Application/json', 'Content-Type' => 'Application/json'}
payload = JSON.parse("{\"documents\": { \"textField1\":\"asdf\" }}").to_json
test_thread = Thread.new {
    response = RestClient::Request.execute(:method => :post, :url => endpoint, :headers => headers, :payload => payload, :verify_ssl => false)
    puts response
}.join

nuxt.config.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)
}

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

Answer 2

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

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

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

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

NUXT中的SSR vuex存储

2 个答案: