dva model状态数据页面刷新后就丢失了怎么办

这个问题的核心在于状态同步的时机和方式。你现在的实现有几个问题：beforeunload 事件并不是每次都能可靠触发，而且 store.getState() 在 subscriptions 里其实拿不到最新的状态，因为 dva 的 model 初始化时并没有直接暴露 store。

更优雅的方式是利用 dva 提供的 onStateChange 钩子来监听状态变化，并实时持久化到 localStorage 中。同时在应用启动时从 localStorage 恢复状态。这样逻辑会更加清晰。

下面是一个改进版的实现：

先在你的 model 里添加一个 onStateChange 监听器：

import { persistState, loadState } from './utils/persist';



export default {

  state: {

    user: null,

    cart: [],

  },

  reducers: {

    save(state, { payload }) {

      return { ...state, ...payload };

    },

  },

  effects: {

    *loadPersistedState(_, { put }) {

      const persistedState = loadState();

      if (persistedState) {

        yield put({ type: 'save', payload: persistedState });

      }

    },

  },

  subscriptions: {

    setup({ dispatch }) {

      // 应用启动时加载持久化状态

      dispatch({ type: 'loadPersistedState' });



      // 监听状态变化并持久化

      const unlisten = window.g_app._store.subscribe(() => {

        const state = window.g_app._store.getState();

        persistState(state);

      });



      // 清理函数，防止内存泄漏

      return () => unlisten();

    },

  },

};

然后在 utils/persist.js 文件中封装持久化的逻辑：

const STORAGE_KEY = 'appState';



export function persistState(state) {

  try {

    const serializedState = JSON.stringify({

      user: state.user,

      cart: state.cart,

    });

    localStorage.setItem(STORAGE_KEY, serializedState);

  } catch (err) {

    console.error('Failed to persist state:', err);

  }

}



export function loadState() {

  try {

    const serializedState = localStorage.getItem(STORAGE_KEY);

    if (serializedState === null) {

      return undefined;

    }

    return JSON.parse(serializedState);

  } catch (err) {

    console.error('Failed to load state:', err);

    return undefined;

  }

}

这个方案的关键点是：
1. 使用 subscribe 方法监听状态变化，确保每次状态更新时都同步到 localStorage。
2. 封装了 persistState 和 loadState 方法，保持代码清晰且可复用。
3. 在应用启动时通过 effect 加载持久化数据，而不是依赖组件生命周期方法，这样更符合 dva 的设计理念。

这样做不仅解决了刷新后状态丢失的问题，还让代码结构更加优雅、职责分离更明确。

嗯，这个问题其实挺常见的。页面刷新后状态丢失是因为浏览器把JS运行环境重置了，这是正常行为。你现在的做法思路是对的，但可能漏掉了一些细节。

首先，你在 subscriptions 里保存状态的方式没错，但要注意：这里的 store.getState() 是全局的 state，你需要确保只取到自己需要的部分（比如你提到的 user 和 cart）。然后在组件加载时恢复状态，这一步也没问题。

不过，你得确认几件事：
1. 确保 global/loadState 这个 action 被正确处理了，在对应的 reducer 里要有相应的逻辑来更新 state。
2. 如果你在某些地方手动重置了 state（比如页面加载时默认初始化），可能会覆盖掉从 localStorage 恢复的数据。

我建议你可以试试这样写：

import { model } from 'dva';



// subscriptions 部分保持不变

subscriptions: {

  setup({ dispatch, history }) {

    window.addEventListener('beforeunload', () => {

      const currentState = store.getState();

      localStorage.setItem('appState', JSON.stringify(currentState.user, currentState.cart));

    });

  }

},



// 新增一个 loadState 的 action

effects: {

  *loadState(action, { put }) {

    const savedState = localStorage.getItem('appState');

    if (savedState) {

      yield put({

        type: 'restoreState',

        payload: JSON.parse(savedState),

      });

    }

  },

},



// 在 reducer 里处理恢复逻辑

reducers: {

  restoreState(state, { payload }) {

    return {

      ...state,

      ...payload,

    };

  },

},

最后，在组件里调用这个 action：

componentDidMount() {

  this.props.dispatch({ type: 'global/loadState' });

}

如果还是有问题，可以看看是不是其他地方干扰了 state 更新。说实话，这种持久化方式在复杂项目里可能会有点乱，WP里面我们一般直接用插件搞定类似需求，但前端的话确实得自己多注意细节。