小编Dai*_*arn的帖子

我使用 larastarters 套件（https://github.com/LaravelDaily/Larastarters）作为业余项目来练习 Intertia、Vue 和 tailwindcss。如果用户单击以默认媒体首选项开始的按钮，我想设置暗模式。我使用 Vuex 从 localstorage 读取状态，一切似乎都正常，我可以成功地将类设置为 dark 到容器，但没有任何反应，而如果我绑定单个类，例如 bg-gray-800 ，则该类将被应用。我错过了一些东西，但我无法弄清楚。这是商店

import { createStore } from 'vuex'
import { getThemeFromLocalStorage, setThemeToLocalStorage } from '../utils/index.js'
// Create a new store instance.
export default createStore({
    state() {
        return {
            darkTheme: getThemeFromLocalStorage(),
        }
    },
    mutations: {
        toggleTheme(state) {
            state.darkTheme = !state.darkTheme;
            setThemeToLocalStorage(state.darkTheme);
        }
    }
});

组件：

<template>
  <button
    class="rounded-md focus:outline-none focus:shadow-outline-purple"
    @click="toggleTheme"
    aria-label="Toggle color mode"
  >
    <template v-if="!dark">
      <svg
        class="w-5 h-5"
        aria-hidden="true"
        fill="currentColor"
        viewBox="0 0 20 20"
      > …