0

我的default.vue布局中有这种代码的平静



        beforeCreate() {
          console.warn('Cookie val=' + Cookies.get('dte'));
          console.warn('Cookie val is for dark: ' + (Cookies.get('dte') === 'true'));
          var userDarkThemeEnabled = this.$store.getters.isDarkThemeEnabledUser;
          console.warn('created userDarkThemeEnabled:' + userDarkThemeEnabled);
          if (userDarkThemeEnabled == null) {
            this.goDark = false;
            return;
          }
          this.goDark = userDarkThemeEnabled;
      },

在控制台我看到

    **Nuxt SSR**

     Cookie val=undefined

     Cookie val is for dark: false
     created userDarkThemeEnabled: false

    **Client Side**

     Cookie val=true
     Cookie val is for dark: true
     created userDarkThemeEnabled: true

因为这个 beforeCreate 钩子在页面重新加载时为 SSR 和客户端调用了两次，所以我在 Vuetify 中的颜色主题有些闪烁，因为 SSR 的变量 goDark 取值为 false 并且 vuetify 应用浅色主题，然后 goDark 变为真并且 vuetify 将主题更改为深色。

如果我对 this.goDark=true 这样的值进行硬编码，它将在页面重新加载期间应用于 SSR 和客户端。所以我的问题是有什么方法可以在 SSR 中为匿名用户（尚未登录但已经更改主题）存储值？

4

1 回答 1

1

所以看起来我找到了解决方案。在创建的钩子中，我可以通过访问服务器端 cookie

this.$nuxt.context.req.headers.cookie

检查了我在控制台中的内容：

SSR                                                                                                                                           
auth.strategy=local; auth.redirect=%2Fcontacts; dte=true

所以你可以找到对我有用的代码

    initTheme() {
      let themeEnabled;
      if (process.server) {
        themeEnabled = this.$parseCookies(this.$nuxt.context.req)['theme'] === 'true';
      } else {
        themeEnabled = this.$store.getters.IS_DARK_THEME_ENABLED;
      }
      this.goDark = themeEnabled;  // use this for  <v-app :dark="isDarkTheme"> computed property isDarkTheme see below
      this.$setTheme(themeEnabled); // store in vuex
    }
 isDarkTheme() {return this.$vuetify.theme.dark = this.goDark;}
于 2020-08-01T12:34:08.087 回答