Vue.js中的Watcher和localstorage setItem

Question

我对使用Vue的watcher和localStorage有疑问。我这里有一个带有即时值的电流监视：true，以便在初始化时触发。但是，即使console.log正确输出数据，也无法将数据设置为localStorage。它仅在通过某种方法手动更改后才起作用。

current: {
    immediate: true,
    handler(data) {
        console.log(data);
        localStorage.setItem('test', JSON.stringify(data));
    },
},

Answer 1

immediate: true

当created()尚未初始化时，使观察者在data钩之前运行。

在这里查看：

Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
  el: '#app',
  data: () => ({
    foo: 'bar'
  }),
  watch: {
    foo: {
      handler(val) {
        console.log('foo changed', val);
      },
      immediate: true
    }
  },
  beforeCreate() {
    console.log('beforeCreate foo:', this.foo)
  },
  created() {
    console.log('created foo:', this.foo)
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>