时间戳

首页 > 解决方案 > 如何使用道具和本地存储制作 vue3 暗模式？

vue.js - 如何使用道具和本地存储制作 vue3 暗模式？

问题描述

我有 2 个 vue 文件，我想制作 darkMode。当我单击导航栏上的图像时，对 Content.vue 没有影响。我尝试使用道具，但它不起作用，因为我在 Content.vue 中导入导航栏而不是相反。我使用本地存储，但它没有反应，所以如果我单击导航栏中的图像，内容不会反应。

导航栏.vue

  <template>
      <nav class="navbar">  
          <ul>
            <img
              src="https://img.icons8.com/android/48/ffffff/sun.png"
              @click="darkMode = !darkMode"
              v-if="darkMode"
            />
            <img
              src="https://img.icons8.com/ios-filled/50/ffffff/moon-man.png"
              @click="darkMode = !darkMode"
              v-if="!darkMode"
            />
          </ul>
        </div>
      </nav>
    </template>

<script>
export default {
  name: "Navbar",
  data() {
    return {
      darkMode: "",
    };
  },
  watch: {
    darkMode: function () {
      localStorage.setItem("darkMode", this.darkMode);
    },
  },
  created() {
    this.darkMode = localStorage.getItem("darkMode");
  },
  mounted() {
    if (localStorage.getItem("darkMode") == "true") {
      this.darkMode = true;
    } else {
      this.darkMode = false;
    }
  },
};
</script>

内容.vue

<template>
  <Navbar />
  <div :class="{ dark: dark }">
    <h1>Test</h1>
  </div>
  </div>
</template>

<script>
import Navbar from './Navbar'
export default {
  name: "Content",
  components: { Navbar },
  data() {
    return {
    };
  },
};
</script>

标签： vue.jstemplatesvuejs3vue-propsdarkmode

解决方案

从我的角度来看，存在以下问题：

  • localStorage 在 created() 中不可用
  • 使用 JSON 将值存储在 localStorage 中，不要依赖自动字符串转换。

试试这个提议：

<template>
  <nav class="navbar">  
    <ul>
      <img
        :src="imageDarkMode"
        @click="toggleDarkMode"
      />
    </ul>
  </nav>
</template>

<script>
export default {
  name: "Navbar",
  data() {
    return {
      darkMode: false,
    };
  },
  computed: {
    imageDarkMode() {
      return this.darkMode ? 
        "https://img.icons8.com/android/48/ffffff/sun.png" : 
        "https://img.icons8.com/ios-filled/50/ffffff/moon-man.png";
    }
  },
  mounted() {
    this.darkMode = !!JSON.parse(localStorage.getItem("darkMode"));
  },
  toggleDarkMode() {
    this.darkMode = !this.darkMode;
    localStorage.setItem("darkMode", JSON.stringify(this.darkMode));
  }
};
</script>

推荐阅读