Javascript 为主题切换程序vuejs创建vue mixin

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

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

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

因此，我通过从@/mixins/themes导入主题，在app.vue和Footer组件中导入了该文件；和mixins:[主题]分别在导出中

我还将：class=currentTheme添加到app.vue文件中

然而，我仍然遇到了一些问题

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

更新：

我已将app.vue中的绑定更新为：class=[currentTheme]，但这仍然不起作用

这是一个新的GIF

正如您所看到的，默认情况下加载的默认主题现在是正确的，但是，当我切换到暗状态时，data currentTheme不会更改。由于本地存储的原因，它只在刷新时更改，如果存在任何问题，我无法使用Vue devtools在下拉列表中选择主题

App.vue

---

我发现你的混音有几个问题

本地存储。 请确保您正在保存主题颜色，否则，如果主题颜色不在本地存储中，则会出现错误

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

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 {...}
}

AnyVueComponent.vue

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

使用这种方式进行类绑定

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

检查此沙箱：

---

您在这里遇到了什么问题？我发现错误“togglethemmixin”未定义OK，然后将混音代码仅放在页脚组件中，或者，如果您希望它在所有组件中都有访问权限，那么创建一个全局混合。我希望切换器位于页脚中，但我需要它来更改主应用程序div中的类，因此我认为混合是最佳选择，并在组件之间共享它，所以它需要在组件之间共享。我已经创建了一个全局混合，但是在页脚中切换不起作用。我会更新这个问题@palaѕѕаааааааааааааааааааа。我将更新问题。更新question@debugabug你只需要加载一次，然后保存很多，我更改了我的答案检查它我已经将当前代码替换为新代码，但它不会动态切换。这里有一个gif@debugabug，我在最后做了一点修改，如果没有用新的错误更新你的帖子的话，应该可以

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

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 {...}
}

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