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

【问题标题】：Nuxt $vuetify.theme.dark reset when i change pageNuxt $vuetify.theme.dark 在我更改页面时重置
【发布时间】：2020-07-14 19:09:19
【问题描述】：

我正在使用 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',
    },
  }
}

感谢您的帮助。

【问题讨论】：

标签： vue.js vuetify.js nuxt.js

【解决方案1】：

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

注意goDark 属性。
在更改 goDark 属性时，将值存储在 Localstorage 中。
在包含 v-app 的组件中，在挂载时 (onMounted) 从那里获取值 localStorage.getItem('[your key for dark property]')，如果有，请使用它或分配默认值。

【讨论】：

【解决方案2】：

首先你需要在 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 组件中你必须绑定一个方法

看起来像这样：

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

它现在应该可以工作了。

【讨论】：

不幸的是，即使这样，当我更改或重新加载页面时，主题也会变淡
你能从问题中创建一个演示链接吗？ @L.Gangemi

【解决方案3】：

我用下面的方法修好了。

1。设置切换器

layouts/default.vue

<template>
  <div>
    <v-btn
      class="px-1"
      min-width="0px"
      icon
      :color="$vuetify.theme.dark ? 'yellow' : 'indigo'"
      @click="switchTheme()"
    >
      <v-icon>mdi-theme-light-dark</v-icon>
    </v-btn>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$vuetify.theme.dark = this.$store.state.darkMode
  },
  methods: {
    switchTheme() {
      this.$store.commit('SWITCH_DARK')
      this.$vuetify.theme.dark = this.$store.state.darkMode
    },
  }
}
</script>

2。在 Vuex 商店中保存暗模式状态

store/index.js

export const state = () => ({
  darkMode: false,
})

export const mutations = {
  SWITCH_DARK(state) {
    state.darkMode = !state.darkMode
  },
}

3。在页面更新时使 store 持久化

安装vuex-persist:

npm install --save vuex-persist

【讨论】：

【解决方案4】：

这适用于我在应用重新加载后检索暗模式：

mounted() {
    setTimeout(() => {
      this.$vuetify.theme.dark = localStorage.getItem('dark') === 'true'
    }, 200)
}

在运行时切换主题：

computed: {
   mode: {
    set(theme) {
       this.$vuetify.theme.dark = theme === 'dark'
       localStorage.setItem('dark', theme === 'dark')
     },
    get() {
       return this.$vuetify.theme.dark ? 'dark' : 'light'
    }
   }
 }

【讨论】：