mobx 如何监听 localStorage 变化
时间: 2023-10-13 12:07:49 浏览: 37
要监听 localStorage 的变化,可以使用 `window.addEventListener('storage', handler)` 方法。在 MobX 中,可以将监听器包装在 autorun 中,以便在 localStorage 发生更改时重新运行 autorun。
下面是一个简单的例子:
```javascript
import { autorun } from 'mobx';
const localStorageKey = 'myKey';
const appState = {
value: localStorage.getItem(localStorageKey) || '',
setValue(newValue) {
this.value = newValue;
localStorage.setItem(localStorageKey, newValue);
}
};
autorun(() => {
console.log(`localStorage[${localStorageKey}] changed: ${localStorage.getItem(localStorageKey)}`);
});
```
在这个例子中,我们定义了一个名为 `appState` 的对象,它包含一个用于存储值的 `value` 属性和一个用于设置值的 `setValue` 方法。在 `setValue` 方法中,我们设置了 localStorage 中的值,并在 autorun 中打印了 localStorage 变化的消息。当 `setValue` 方法被调用时,autorun 将被重新运行,并打印出新的 localStorage 值。
请注意,这个例子中的 autorun 只是一个示例。实际上,你可能需要使用 `reaction` 或 `computed` 来更好地控制 MobX 的行为。