NUXT中的s-s-r vuex存储

Posted 2023-02-22

【中文标题】NUXT中的s-s-r vuex存储

【英文标题】：s-s-r vuex store in NUXT

【发布时间】：2019-05-26 18:30:55

【问题描述】：

我正在开发 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 挂钩？

【问题讨论】：

你使用什么持久化包？你在这个包中使用 localStorage 作为存储吗？

我用这个github.com/robinvdvleuten/vuex-persistedstate。是本地存储

我解决了这个问题，方法是让everythibg 默认为隐藏，然后监听从LocalStorage 加载回状态的时间，并添加一个额外的变量，最初只是stateLoaded = false。所以当状态被加载时，任何依赖于它被加载的东西也必须依赖于那个变量。

是的，但这更像是一个技巧而不是真正的解决方案。它仍然会跳转，但反之亦然 - 如果有条件显示的元素位于页面顶部，则页面将展开。

【参考方案1】：

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

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

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

（是选项s-s-r: false的新版本）

【参考方案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' 
]

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

【讨论】：

这是什么库import cookie from 'cookie'？

如何使用，能否提供一些额外的信息？

这是唯一的方法，我可以确认正在处理 s-s-r 和客户端