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

Posted 2023-02-22

【中文标题】如何使用道具和本地存储制作 vue3 暗模式？

【英文标题】：How to make vue3 darkmode with props and localstorage?

【发布时间】：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>

【参考方案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>