javascript - 为主题切换器 vuejs 创建 vue mixin

Question

我创建了三个主题:浅色、默认和深色。我现在尝试在页脚中创建一个切换开关，以便可以在每个主题之间切换。

根据@jogarcia的建议，我已将代码更改为以下内容。

mixin 现在位于其自己的文件中，名为 themes.js

export default {
  data() {
    return {
      currentTheme: "",
    };
  },
  mounted() {
    const storedTheme = localStorage.getItem("theme-colour");
    if (!storedTheme) {
      this.currentTheme = "theme-default";
    } else {
      this.currentTheme = localStorage.getItem("theme-colour");
    }
  },
  methods: {
    toggleTheme() {
      const storedTheme = localStorage.getItem("theme-colour");
      if (!storedTheme) {
        localStorage.setItem("theme-colour", "theme-light");
        this.currentTheme = localStorage.getItem("theme-colour");
      }
      if (storedTheme === "theme-default") {
        localStorage.setItem("theme-colour", "theme-light");
        this.currentTheme = localStorage.getItem("theme-colour");
      } else {
        localStorage.setItem("theme-colour", "theme-dark");
        this.currentTheme = localStorage.getItem("theme-colour");
      }
    },
  },
};

因此，我通过执行 import theme from "@/mixins/themes"; 和 mixins 将文件导入到 app.vue 和 Footer 组件中:分别导出中的[主题]。

我还将 :class="currentTheme" 添加到 app.vue 文件中。

但是，我仍然遇到了一些问题。

1. 如何让主题类动态更改？

这是我的意思的 gif，正如您所看到的，我可以切换，localStorage 中的值正在更改，但主应用程序 div 中的类名称没有更改。

https://i.gyazo.com/2044ff9293328aaaae8810272ffc6a5a.mp4

更新:

我已将 app.vue 中的绑定(bind)更新为 :class="[currentTheme]"，但这仍然不起作用。

这是一个新的 GIF https://i.gyazo.com/2f1d6a98b51e2d00c8ba748940016f55.mp4

正如您所看到的，默认主题默认加载，现在是正确的，但是，当我切换到黑暗时，数据 currentTheme 不会改变。由于本地存储，它只会在刷新时发生变化，如果这也有问题的话，我无法使用 Vue devtools 在下拉列表中选择主题。

App.vue

<template>
  <div
    id="app"
    class="flex flex-col min-h-screen h-full font-sans text-copy-primary leading-normal tracking-wide overflow-x-hidden"
    :class="[currentTheme]"
  >
    <Navigation />
    <DealBanner discountValue="20" date="April 26, 2020 12:00" discountCode="RELEASE" />
    <router-view class="flex-1" />
    <Footer />
  </div>
</template>

<script>
import themes from "@/mixins/themes";
import Navigation from "@/components/Navigation";
import DealBanner from "@/components/DealBanner";
import Footer from "@/components/Footer";

export default {
  name: "App",
  components: {
    Navigation,
    DealBanner,
    Footer
  },
  mixins: [themes]
};
</script>

Footer.vue(简短)

<template>
  <footer
    class="px-6 xl:px-0 py-6 bg-theme-primary text-copy-primary border-t border-theme-ternary"
  >
    <div class="flex flex-col justify-between lg:flex-row lg:items-center xl:px-
      <div class="text-center">
        <p>Theme Switcher</p>
        <div @click="toggleTheme">Toggle</div>
        {{currentTheme}}
      </div>
    </div>
  </footer>
</template>

<script>
import themes from "@/mixins/themes";
export default {
  name: "Footer",
  mixins: [themes]
};
</script>
...

Answer 1

我发现你的 mixin 有几个问题。

本地存储。

确保您正在保存主题颜色，否则如果不在本地存储中，您将收到错误消息。

methods: {
    toggleTheme() {
      const storedTheme = localStorage.getItem("theme-colour");
      if (!storedTheme) {
        localStorage.setItem("theme-colour", "theme-light");
        this.currentTheme = "theme-dark";
      }
      if (storedTheme === "theme-light") {
        localStorage.setItem("theme-colour", "theme-light");
        this.currentTheme = "theme-dark";
      } else {
        localStorage.setItem("theme-colour", "theme-dark");
        this.currentTheme = "theme-light";
      }
    },
  },

mixin 的结构

我不确定您是否正确导入了 mixin，因此我将在此处添加它以防万一。这就是我制作和导入 mixin 的方式，当然遵循文档。如果您使用的是 vue cli，则 mixin 应该位于其自己的文件中，这种方式遵循这个想法。

mixin.js

export default {
  data() {},
  methods {}
}

AnyVueComponent.vue

<template>
...
</template>
<script>
  import mixin from 'path to my mixin';
  export default {
    ......
    mixins: [mixin]
    ......
  }
</script>

当前主题变量 react 性

您不必不断从 localStorage 加载，您可以随时保存，但仅在安装时加载，有点像这样:

mixin.js

export default {
  data() {
    currentTheme: ''
  },
  mounted(){
    const storedTheme = localStorage.getItem("theme-colour");
    if (!storedTheme) {
      this.currentTheme = "theme-light"
    }else{
      this.currentTheme = localStorage.getItem("theme-colour");
    }
  },
  methods {...}
}

使用这种方式进行类绑定(bind)。

//Any format you want to do to currentTheme do it inside the computed
:class=[currentTheme]

检查此沙箱:

https://codesandbox.io/s/exciting-keller-nowok?file=/src/App.vue