Nuxt $ vuetify.theme.dark在我更改页面时重置

Question

我正在使用Nuxt.js v2.12.2和Vuetify。我在新项目的初始配置过程中安装了Vuetify。

我想建立一个静态网站，并提供一些功能，例如将主题从黑暗变为明亮。

所以我在默认布局中添加了一个开关来更改此属性：$ vuetify.theme.dark

这是我的开关代码：

<v-switch v-model="$vuetify.theme.dark" />

我什至尝试过这种方式，但还是一样：

<v-switch @click="$vuetify.theme.dark = !$vuetify.theme.dark" />

当我单击开关时，属性会正确更改。但是，如果我更改页面或重新加载页面，它会返回到他以前的值。

我如何更改此属性，以使其在会话中保持这种状态？我需要将其保存在某个地方吗？

这是nuxt.config.js中的代码：

 vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
  themes: {
    dark: {
      primary: colors.blue.darken2,
      accent: colors.grey.darken3,
      secondary: colors.amber.darken3,
      info: colors.teal.lighten1,
      warning: colors.amber.base,
      error: colors.deepOrange.accent4,
      success: colors.green.accent3
    },
    light: {
      primary: '#3f51b5',
      secondary: '#b0bec5',
      accent: '#8c9eff',
      error: '#b71c1c',
    },
  }
}

感谢您的帮助。

Answer 1

首先，在Vuetify配置文件中，您需要添加此属性：

dark: true/false

现在的配置应如下所示：

theme: {
  dark: true,
  themes: {
    dark: {
      primary: colors.blue.darken2,
      accent: colors.grey.darken3,
      secondary: colors.amber.darken3,
      background: '#34358e'
    },
    light: {
     primary: '#3f51b5',
     secondary: '#b0bec5',
     accent: '#8c9eff',
     error: '#b71c1c',
    }
  }
}

然后在v-app组件的Layout中，您必须绑定方法

看起来像这样：

<v-app :dark="setTheme">
 <v-container>
  <v-switch v-model="goDark"></v-switch>
 </v-container>
</v-app>

并且在脚本标签中，将goDark添加到数据中，并将setTheme作为计算的属性。

<script>
export default {
  data: () => ({
    goDark: false,
  }),
  computed: {
    setTheme() {
      if (this.goDark === true) {
        return (this.$vuetify.theme.dark = true);
      } else {
        return (this.$vuetify.theme.dark = false);
      }
    }
  }
};
</script>

现在应该可以工作。

Answer 2

根据Art Mary的建议，您需要做的另一件事是将设置存储在Localstorage中，然后在应用程序加载时从那里获取设置。因此，请密切注意goDark属性，将其更改后，将值存储在Localstorage和包含v-app的组件中，在挂载时从那里获取值（如果有），请使用它或分配默认值。