Магазин SSR vuex в НЮКСТ - PullRequest
Новая
       36

Магазин SSR vuex в НЮКСТ

0 голосов
/ 29 декабря 2018

Я занимаюсь разработкой приложения vue2 + nuxt и использую пакет сохраненных состояний vuex +.В одном из компонентов я отображаю 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, то отображается, если не исчезает.Кроме того, после обновления он все еще работает.

Единственная проблема, которую я не могу решить, это то, что, когда логическое значение false после обновления, div показывают в течение доли секунды.Он исчезает после, скажем, .2s, но даже при том, что он настолько быстрый, он все равно заставляет страницу «прыгать», потому что .nav__topbar имеет ширину 100% и высоту 20vh.Так что на долю секунды я вижу этот div, затем он скрывается, и все страницы поднимаются вверх, что выглядит очень некрасиво, и я не могу это игнорировать.

Есть ли способ предотвратить такое поведение?

Может быть, я смогу использовать эти хуки fetch () или asyncData, предоставляемые Nuxt?

1 Ответ

0 голосов
/ 04 января 2019

У меня была та же проблема в последние дни, пока я не нашел этот комментарий

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

Решил мою проблему, надеюсь, она решит и вашу.Единственное, что я узнал, это то, что функция теперь называется ОБА на сервере и на клиенте.Постараюсь выяснить почему.

...