如何在Vue.js中观看本地存储2

Question

如何了解Banana.vue中的更改？

我正在使用，addEventListener，@watch。。。但是，不起作用。。。。。。。。。。。。。。。。。。。。。。。。

index.vue是导入Apple.vue，Banana.vue

在Apple.vue中
localStorage.setItem('fruit', 'apple)

在Banana.vue中

@watch(localStorage.getItem('fruit' || '')
changeFruit() {
this.fruit = localStorage.getItem('fruit')
}

Answer 1

使用getter和setter

data() {
return {
get token() {
return localStorage.getItem('token') || 0;
},
set token(value) {
localStorage.setItem('token', value);
this.fruit = localStorage.getItem('fruit')
}
};
}

Answer 2

LocalStorage不是被动的，但您可以访问组件中的localStorage值，如下所示：

Vue.component('apple', {
props: ['childmsg'],
template: '<p>{{ childmsg }}</p>',
mounted() {
localStorage.setItem('fruit', 'apple');
}
});
Vue.component('banana', {
data: {
fruit: ''
},
props: ['childmsg'],
template: '<p>{{ childmsg }}</p>',
mounted() {
if (localStorage.fruit) {
this.fruit = localStorage.fruit;
console.log(this.fruit);
}
}
});
var app = new Vue({
el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<apple childmsg="This is Apple"></apple>
<banana childmsg="This is Banana"></banana>
</div>