如何使用道具和本地存储制作 vue3 暗模式？答案

【问题标题】：How to make vue3 darkmode with props and localstorage?如何使用道具和本地存储制作 vue3 暗模式？
【发布时间】：2021-08-07 10:18:42
【问题描述】：

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

Navbar.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>

Content.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.js templates vuejs3 vue-props darkmode

【解决方案1】：

在我看来有以下问题：

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>

【讨论】：