vue如何同步修改storage数据并展示到界面上

可以使用Vue的计算属性（computed）和监视器（watch）来实时监控Storage中的数据，并将其同步到界面上。

1. 使用计算属性

将Storage中的数据绑定到计算属性上，当Storage数据发生变化时，计算属性也会自动更新，从而实现同步更新到界面上。

例如，假设我们将用户信息存储在localStorage中，可以这样实现同步更新：

<template>
 <div>
 <h2>{{ userInfo.name }}</h2>
 <p>{{ userInfo.age }}</p>
 </div>
</template>

<script>
export default {
 computed: {
 userInfo() {
 return JSON.parse(localStorage.getItem('userInfo')) || {};
 }
 }
}
</script>

在这个例子中，我们将Storage中的userInfo数据绑定到了计算属性userInfo上，并使用了JSON.parse方法将其转换为对象类型。

当Storage中的userInfo数据发生变化时，计算属性userInfo也会自动更新，从而实现同步更新到界面上。

2. 使用监视器

另一种实现同步更新的方式是使用监视器，当Storage中的数据发生变化时，监视器会自动触发回调函数，从而实现同步更新到界面上。

例如，假设我们将用户信息存储在localStorage中，可以这样实现同步更新：

<template>
 <div>
 <h2>{{ name }}</h2>
 <p>{{ age }}</p>
 </div>
</template>

<script>
export default {
 data() {
 return {
 name: '',
 age: '',
 }
 },
 mounted() {
 this.name = localStorage.getItem('name') || '';
 this.age = localStorage.getItem('age') || '';
 // 监听Storage的变化
 window.addEventListener('storage', this.handleStorageChange);
 },
 beforeDestroy() {
 // 取消监听Storage的变化
 window.removeEventListener('storage', this.handleStorageChange);
 },
 methods: {
 // Storage变化的回调函数
 handleStorageChange(event) {
 if (event.key === 'name') {
 this.name = event.newValue || '';
 } else if (event.key === 'age') {
 this.age = event.newValue || '';
 }
 }
 }
}
</script>

在这个例子中，我们使用了mounted钩子函数来读取Storage中的数据，并使用了window.addEventListener方法来监听Storage的变化。

当Storage中的数据发生变化时，回调函数handleStorageChange会自动触发，并更新组件数据，从而实现同步更新到界面上。在组件销毁前，我们使用window.removeEventListener方法来取消监听Storage的变化。