Question

我正在尝试从nuxt js中的locastorage中读取内容。

我使用了process.browser if语句。没有错误。

这是我的代码：

  data() {
    return {
      classes: ['light', 'dark', 'darker'],
      current: 0
    }
  },
  created() {
    if (process.browser) this.getBgDarkness()

    console.log(this.classes[this.current])
  },
  methods: {
    makeBgDarker() {
      this.current < 2 ? (this.current += 1) : (this.current = 0)
      if (process.browser)
        window.localStorage.setItem('darknessLevel', this.current)
    },
    getBgDarkness() {
      this.current = Number(window.localStorage.getItem('darknessLevel'))
    }
  }

这是我的模板：

<header :class="['header position-relative', `header--${classes[current]}`]"></header>

本地存储设置成功，并且我的current数据已同步到它。

但是我的css类没有改变。

这是我的控制台： console screenshot

Answer 1

嗯，在我看来似乎可行。尝试删除所有本地存储的东西，看看是否可行。没有理由不...

new Vue({
  el: "#app",
  data() {
    return {
      classes: ["light", "dark", "darker"],
      current: 0
    };
  },  
  methods: {
    makeBgDarker() {
      this.current === this.classes.length - 1
        ? (this.current = 0)
        : (this.current += 1);
    }
  }
})

.header--light {
  color: yellow;
}
.header--dark {
  color: blue;
}
.header--darker {
  color: darkblue;
}

<div id="app">
    <div :class="['header position-relative', `header--${classes[current]}`]">Hello</div>
    <button @click="makeBgDarker">+</button>
</div>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

在nuxt js中从localstorage读取是无反应的

1 个答案: