mobx 可以监听 localStorage 的变化吗
时间: 2023-11-04 09:16:59 浏览: 105
react-React组件可以安全地在渲染阶段将数据保存到localStorage
MobX本身并不提供直接监听localStorage变化的功能,但是可以通过以下步骤实现:
1. 创建一个Observable对象,用来保存localStorage中的值。
2. 使用autorun或reaction函数来监视这个Observable对象的变化,并在变化后更新localStorage。
3. 在应用初始化时,从localStorage中读取数据并更新Observable对象。
这样,就可以达到监听localStorage变化的效果。以下是一个简单的示例代码:
```javascript
import { observable, autorun } from "mobx";
const localStorageKey = "myLocalStorageData";
class MyStore {
@observable localStorageData = {};
constructor() {
// 从localStorage中读取数据并更新Observable对象
const data = localStorage.getItem(localStorageKey);
if (data) {
this.localStorageData = JSON.parse(data);
}
// 监听Observable对象的变化,并更新localStorage
autorun(() => {
localStorage.setItem(localStorageKey, JSON.stringify(this.localStorageData));
});
}
}
const myStore = new MyStore();
// 在其他地方使用myStore.localStorageData来访问localStorage中的数据
```
阅读全文