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 とクライアント側に対して 2 回呼び出すため、SSR の変数 goDark が値 false を取得し、vuetify がライト テーマを適用し、その後 goDark が true になり、vuetify がテーマをダークに変更するため、Vuetify でカラー テーマの点滅が発生しました。

this.goDark=true のように値をハードコーディングすると、ページのリロード時に SSR とクライアント側に適用されます。私の質問は、SSR で匿名ユーザー (まだログインしていないが、既にテーマを変更したユーザー) に保存されている値を取得する方法はありますか?

4

1 に答える 1