NUXT의 SSR vuex 저장소

NUXT의 SSR vuex 저장소

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.navInfotrue 입니다.그렇지 않으면 표시됩니다.또, 리프레시 후에도 동작합니다.

유일하게 해결할 수 없는 문제는 새로고침 후 부울이 false일 때 div가 1초 동안 표시되는 것입니다..2s라고 말하면 사라지지만 너무 빨라서 페이지를 '점핑'할 수 있습니다..nav__topbar폭 100%, 높이 20vh입니다.그래서 잠깐 동안 이 div를 보고는 숨어서 모든 페이지가 올라갑니다. 아주 못생겼죠. 그리고 무시할 수 없습니다.

이런 행동을 막을 방법이 있나요?

---

Nuxt에서 제공하는 이 fetch() 또는 asyncData 훅을 사용할 수 있을까요?

이 코멘트를 발견하기 전까지만 해도 같은 문제가 있었습니다.

플러그 인/크리스테이트.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.config.syslog

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

내 문제도 해결됐고, 네 문제도 해결됐으면 좋겠어.제가 유일하게 인지한 것은 그 기능이 서버와 클라이언트 모두에서 BOTH로 불린다는 것입니다.이유를 알아내려고 노력할 것이다.

블랙페이드 솔루션을 사용하는 경우 다음 사항을 추가해야 합니다.mode: 'client'플러그인 선언 시nuxt.config.js:

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

https://fr.nuxtjs.org/guide/plugins/ 를 참조해 주세요.

(옵션의 새로운 버전입니다.ssr: false)

언급URL : https://stackoverflow.com/questions/53966872/ssr-vuex-store-in-nuxt