mobx 如何监听 localStorage 变化

要监听 localStorage 变化，可以使用`window.addEventListener('storage', callback)`方法。这个方法会在 localStorage 中发生变化时触发回调函数。

在 MobX 中，可以使用`autorun`函数来监听 localStorage 的变化。`autorun`函数会自动追踪被观察的数据，并在它们发生变化时执行回调函数。

以下是一个使用 MobX 监听 localStorage 的例子：

import { autorun } from 'mobx';

// 定义一个 observable 对象
const storage = {
  value: localStorage.getItem('value') || '',
  setValue(newValue) {
    this.value = newValue;
    localStorage.setItem('value', newValue);
  },
};

// 使用 autorun 监听 storage.value 的变化
autorun(() => {
  console.log(`localStorage 中的 value 发生变化：${storage.value}`);
});

// 修改 localStorage 中的 value
storage.setValue('new value');

在这个例子中，我们先定义了一个 observable 对象 `storage`，它有一个属性 `value` 表示 localStorage 中的值。`setValue` 方法用于修改 `value` 值，并将修改后的值存储到 localStorage 中。

然后我们使用 `autorun` 函数来监听 `storage.value` 的变化。当 `storage.value` 发生变化时，`autorun` 函数会自动执行回调函数，输出变化后的值。

最后我们调用 `storage.setValue('new value')` 修改了 localStorage 中的 value 值，这时 `autorun` 函数会自动执行回调函数，输出新的值。

注意：`autorun` 函数会在组件挂载时自动执行一次回调函数，因此在上面的例子中，在控制台中会先输出 localStorage 中的 value 值。