vue.js - 如何在计算值更改时刷新它

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>```

标签： vue.jsvuex

Answer 1

以下是改动

       <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>
       ```