vue.js - NUXT中的SSR vuex存储
问题描述
我正在开发 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 时。它在让我们说 .2 秒后消失,但即使它是如此之快,它仍然会使页面“跳跃”,因为.nav__topbar
它是 100% 宽度和 20vh 高度。所以在几秒钟内,我可以看到这个 div,然后它隐藏起来,所有页面都跳起来,看起来非常难看,我不能忽视这一点。
有什么办法可以防止这种行为?
也许我可以利用 Nuxt 提供的这个 fetch() 或 asyncData 钩子?
解决方案
最近几天我遇到了同样的问题,直到我找到了这个评论
插件/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' }
]
解决了我的问题,希望也能解决你的问题。我唯一认识到的是该函数现在在服务器和客户端上都被调用。将尝试找出原因。
推荐阅读
- azure-aks - 使用部署在 AKS 上的 Jaeger 跟踪 Spring Boot 微服务
- c++ - 更多类的模板化律师-客户成语
- macos - 在 MacOS Mojave 上修改 TCC.db
- javascript - 如何将ripple-lib与nativescript一起使用
- javascript - Laravel 和 Vue:Axios GET 调用返回 200 状态但没有响应
- python-3.x - 如何将 .csv 文件作为输入
- database - 类似于 RethinkDB 的 ReQL 的数据库?
- cloud-foundry - CF 在哪种 cpu 模式下运行容器?
- android - 修改 gradle 中的 cmake 参数以使用 C++ 库在 Android 项目中进行检测
- javascript - 赛普拉斯新手:未发现的元素