vue.js - Vuetify在明暗主题之间切换(使用vuex)

Question

所以在我的Vue项目中，我基本上有两个页面/组件，将根据URL使用vue-router来显示这些页面/组件。我可以通过按钮在这些页面/组件之间切换。

我也正在使用vuex来管理某些数据。

现在，我在其中一个组件中添加了一个开关，以在vuetify的深色和浅色主题之间切换。
在此组件的模板中，我这样做:

<v-switch
  label="Toggle dark them"
  @change="toggleDarkTheme()"
></v-switch>

在被调用的函数中，我做了:

toggleDarkTheme() {
      this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
      console.log(this.$vuetify.theme.dark);
},

在app.vue中，我包含了 <v-app dark>，在main.js中，我具有以下内容:

Vue.use(Vuetify);
const vuetify = new Vuetify({
  theme: {
    // dark: true,
    themes: {
      light: {
        primary: colors.purple,
        secondary: colors.grey.darken1,
        accent: colors.shades.black,
        error: colors.red.accent3,
        background: colors.indigo.lighten5, 
      },
      dark: {
        primary: colors.blue.lighten3,
        background: colors.indigo.base,
      },
    },
  },
});

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  vuetify,
  render: (h) => h(App),
}).$mount('#app');

所以现在我的问题是，当我单击开关时，该组件中的主题确实从亮模式切换到了暗模式。浅色模式是默认设置，当我单击一次开关时，我得到了深色主题。但是，当我单击按钮切换到其他URL时，将使用浅色主题。
如何正确实现此功能？

提前致谢!

Answer 1

您应该有一个名为vuetify.js的JavaScript类，在您的情况下应该看起来像这样。

import Vue from "vue";
import Vuetify from "vuetify/lib";

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: colors.purple,
        secondary: colors.grey.darken1,
        accent: colors.shades.black,
        error: colors.red.accent3,
        background: colors.indigo.lighten5
      },
      dark: {
        primary: colors.blue.lighten3,
        background: colors.indigo.base
      }
    }
  }
});

您的开关应该可以工作，但是以防万一，请尝试使用我在组件中创建的此按钮。

    <div>
      <v-tooltip v-if="!$vuetify.theme.dark" bottom>
        <template v-slot:activator="{ on }">
          <v-btn v-on="on" color="info" small fab @click="darkMode">
            <v-icon class="mr-1">mdi-moon-waxing-crescent</v-icon>
          </v-btn>
        </template>
        <span>Dark Mode On</span>
      </v-tooltip>

      <v-tooltip v-else bottom>
        <template v-slot:activator="{ on }">
          <v-btn v-on="on" color="info" small fab @click="darkMode">
            <v-icon color="yellow">mdi-white-balance-sunny</v-icon>
          </v-btn>
        </template>
        <span>Dark Mode Off</span>
      </v-tooltip>
    </div>

Button在您的 <script>中调用此方法

darkMode() {
      this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
    }