如何在更改时刷新计算的值

Question

我想在单击切换时更改 class = "theme - $ {nightMode}" 的值，但它只有在我刷新页面时才有效，但我不知道如何设置一个观察者，以便“他查看值修改

  ```  <template>
  <div id="app" :class="`theme-${nightMode}`">
    <router-view />
    <Header />
    <Footer />
  </div>
</template>

<script>
import Header from '@/components/molecules/Header/index.vue';
import Footer from '@/components/molecules/Footer/index.vue';

export default {
  name: 'App',

  components: { Header, Footer },
  data() {
    return {
      themeMode: ''
    };
  },

  computed: {
    nightMode() {
      const mode = localStorage.getItem('DarkMode');
      if (mode === 'true') {
        console.log('dark');
        return 'dark';
      } else {
        console.log('light');
        return 'light';
      }
    }
  },
  watch: {
    themeMode(newVal) {
      this.nightMode = newVal;
    }
  }
};
</script>

<style lang="scss" src="./assets/scss/style.scss"></style>```

Answer 1

您无法通过 this.nightMode = newVal; 之类的操作来更新计算值。即使这是可能的（我猜不可能），这也会误用 vue 框架。

我认为最好在安装的（或创建的）钩子中初始化 themeMode，见下文：

<template>
  <div id="app" :class="appClass">
    <router-view />
    <Header />
    <Footer />
  </div>
</template>

<script>
import Header from '@/components/molecules/Header/index.vue';
import Footer from '@/components/molecules/Footer/index.vue';

export default {
  name: 'App',

  components: { Header, Footer },
  data() {
    return {
      themeMode: '',
    };
  },
  mounted() {
    const mode = localStorage.getItem('DarkMode');
    this.themeMode = mode === 'true' ? 'dark' : 'light';
  },
  computed: {
    appClass() {
      return `theme-${this.themeMode}`;
    },
  },
};
</script>

编辑：

实际上，您在 Home 组件中定义的 toogle 并没有修改您的本地数据 themeMode，而是修改了您的 vuex 存储的 isDark 状态。 => 你应该直接使用 isDark 状态来设置你 class:

<template>
  <div id="app" :class="appClass">
    <router-view />
    <Header />
    <Footer />
  </div>
</template>

<script>
import Header from '@/components/molecules/Header/index.vue';
import Footer from '@/components/molecules/Footer/index.vue';

export default {
  name: 'App',

  components: { Header, Footer },
  mounted() {
    this.$store.commit('initializeDarkMode', localStorage.getItem('DarkMode'));
  },
  computed: {
    appClass() {
      return `theme-${this.$store.state.isDark === 'true' ? 'dark' : 'light'}`;
    },
  },
};
</script>

Answer 2

以下是变化

       <template>
         <div id="app" :class="`theme-${themeMode}`">
           <router-view />
           <Header />
           <Footer />
         </div>
       </template>
       
       <script>
       import { mapGetters } from 'vuex'; // change Added
       import Header from '@/components/molecules/Header/index.vue';
       import Footer from '@/components/molecules/Footer/index.vue';
       
       export default {
         name: 'App',
       
         components: { Header, Footer },
         data() {
           return {
             themeMode: 'light' // change Added
           };
         },
         computed: {
           ...mapGetters(['isDark']) // change Added
         },
         watch: { // change Added
           isDark(newVal) {
            this.themeMode = newVal ? 'dark' : 'light';
          }
         },
         mounted() {
           const mode = localStorage.getItem('DarkMode');
           if (mode === 'true') {
               console.log('dark');
               return 'dark';
             } else {
               console.log('light');
               return 'light';
           }
         }
       };
       </script>
       
       <style lang="scss" src="./assets/scss/style.scss"></style>
       ```

如何在更改时刷新计算的值

how to refresh the value of computed when it changes

vue.js

vuex