react+mobx强制刷新之后会使保存的状态丢失怎么解决

问题描述

使用mobx储存了我的导航但是发现我强制刷新页面，存储的状态就丢失了

解决方案

• 本地存储

使用浏览器的本地存储（localStorage 或 sessionStorage）将状态数据保存在客户端。这样，即使页面刷新，数据也能被恢复。

class AppStore {
  // ... 其他代码 ...

  constructor() {
    makeAutoObservable(this);
    const storedNavData = localStorage.getItem('navData');
    this.saveNav(storedNavData ? JSON.parse(storedNavData) : []);
  }

  saveNav(navData) {
    this.navData = navData;
    localStorage.setItem('navData', JSON.stringify(navData));
  }

  // ... 其他代码 ...
}

• ?使用 React Router 和 React Context

如果你的应用使用 React Router，你可以结合 React Context 来管理一些全局状态。这些状态可以通过 Context 提供者提供，并在整个应用中共享。这样，即使页面刷新，Context 中的状态也能够被保留。

// 创建一个 Context
import { createContext, useContext } from 'react';

const AppContext = createContext();

export const AppProvider = ({ children }) => {
  const appStore = useStore(); // 使用你的 MobX store
  return <AppContext.Provider value={appStore}>{children}</AppContext.Provider>;
};

export const useAppStore = () => useContext(AppContext);

在你的应用的顶层组件中，使用 AppProvider 包裹整个应用。这样，在刷新时，Context 中的状态仍然存在。

import { AppProvider } from './path-to-your-context-file';

const App = () => {
  return (
    <AppProvider>
      {/* 其他组件 */}
    </AppProvider>
  );
};

export default App;

在需要访问全局状态的组件中，使用 useAppStore 来获取 MobX store。