vue.js - 当我更改页面时 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" />

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

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

这是 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

正如 Art Mary 所建议的，您需要做的另一件事是将设置存储在 Localstorage 中，然后在应用程序加载时，从那里获取设置。所以基本上:

关注 goDark属性(property)。

关于goDark的变更属性将值存储在 Localstorage 中。

在包含 v-app 的组件中，在安装时( onMounted )从那里获取值 localStorage.getItem('[your key for dark property]') , 如果有的话，使用它或指定默认值。