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

我在Vuetify中使用Nuxt.jsv2.12.2。 我在新项目的初始配置期间安装了Vuetify

我想建立一个静态网站，具有一些功能，如将主题从暗改为亮

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

以下是我的交换机代码：

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

---

感谢您的帮助。

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

dark: true/false

配置现在应如下所示：

主题：{
黑暗：是的，
主题：{
黑暗：{
原色：颜色。蓝色。深色，
口音：颜色、灰色、深色，
次要：颜色。琥珀色。深色3，
背景：“#34358e”
},
灯光：{
主要：“#3f51b5”，
次级：'#b0bec5'，
重音：“#8c9eff”，
错误：'#b71c1c'，
}
}
}

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

dark: true/false

配置现在应如下所示：

主题：{
黑暗：是的，
主题：{
黑暗：{
原色：颜色。蓝色。深色，
口音：颜色、灰色、深色，
次要：颜色。琥珀色。深色3，
背景：“#34358e”
},
灯光：{
主要：“#3f51b5”，
次级：'#b0bec5'，
重音：“#8c9eff”，
错误：'#b71c1c'，
}
}
}

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

goDark

属性，一旦它发生变化，请将值存储在Localstorage和包含v-app的组件中，在安装时从那里获取值，如果有，请使用它或指定默认值。

如Art Mary所建议，您需要做的另一件事是将设置存储在Localstorage中，然后在应用程序加载时从那里获取设置。因此，请注意

goDark

属性，一旦它发生更改，请将值存储在Localstorage和包含v-app的组件中，在安装时从那里获取值，如果有，请使用它或指定默认值。

我按照下面的方式修复了它

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>

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>

3.在页面更新时使存储持久化 安装：

---

不幸的是，即使以这种方式，当我更改或重新加载页面时，主题也会变轻。你能从问题中创建演示链接吗@不幸的是，即使这样，当我更改或重新加载页面时，主题也会变轻。你能从问题中创建一个演示链接吗@甘格米

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

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

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

npm install --save vuex-persist