mobx-persist 不会将我的数据保存在本地存储中

Question

最近我正在使用 Mobx 并且运行良好，但是当刷新页面时数据丢失并且很好，但我想将数据保留在 localStorage 中。 Mobx-persist 用于将数据保存在 localStorage 中，我在我的项目中实现了它，但不起作用，我不知道为什么。

这是我的 authStore：

import { observable, action } from 'mobx';
import { fireauth } from '../config/firebase';
import { persist } from 'mobx-persist'


class AuthStore {
    @persist @observable authState = false;
    @persist @observable title = "Dashboard";
    @persist @observable img = "";
    @persist('object') @observable userAuth = {useremail: "", userpass: ""};

    @action handleChange = (value, event) => {
        this.userAuth[value] = event.target.value;
    }

    @action submit = () => {
        fireauth.signInWithEmailAndPassword(this.userAuth["useremail"], this.userAuth["userpass"]).then(() => {
            this.authState = true;
            console.log(this.authState);
        }).catch(function(error) {
            // Handle Errors here.
            var errorCode = error.code;
            var errorMessage = error.message;

            console.log({ errorCode, errorMessage })
            // ...
        });

        this.authState = true;
        alert(this.authState)
    }

    @action logout = () => {
        fireauth.signOut().then(() => {
            this.authState = false;
            console.log("si")
          }).catch((error) => {
            console.log(error)
          });
    }
}

export default AuthStore;

我也有一个 rootStore：

import { create } from 'mobx-persist';

import AuthStore from './authStore.js';

const hydrate = create({
  storage: localStorage,
});

export class RootStore {
    authStore = new AuthStore(this);

    constructor() {
        hydrate('auth', this.authStore)
    }  

};

export const RootStoreContext = new RootStore();

通过根存储的我的索引：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import { Provider } from 'mobx-react';

import { RootStoreContext } from './store/rootStore';


ReactDOM.render(
  <React.StrictMode>
    <Provider rootStore={ RootStoreContext } authStore={ RootStoreContext.authStore }>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

和登录组件（使用存储和应用操作的地方）

import React from 'react';
import './index.css';
import logo from '../../assets/img/logo-ondoo.png';
import email from '../../assets/img/email-icon.svg';
import secure from '../../assets/img/secure-icon.svg';
import see from '../../assets/img/see-icon.svg';
import  { inject, observer } from 'mobx-react';

@inject('authStore')
@observer
class App extends React.Component {
    
    constructor(props) {
        super(props);
    }

    render () {
        return (
            <div className="container">
                <div className="login-form">
                    <div className="login-logo">
                        <img src={ logo }></img>
                        <p>Productividad al alcance de tu mano</p>
                    </div>

                    <div className="login-form-div">
                        <form >
                            <div className="text-input-content">
                                <img src={ email } id="username" name="username" className="text-input-lefticon"/>
                                <input type="text" placeholder="Correo electrónico" onChange={ (e) => this.props.authStore.handleChange("useremail", e)} />
                            </div>

                            <div className="text-input-content">
                                <img src={ secure } className="text-input-lefticon" />
                                <input type="text" id="password" placeholder="Contraseña" onChange={ (e) => this.props.authStore.handleChange("userpass", e)}/>
                                <img src={ see } className="text-input-righticon" />
                            </div>

                            <div>
                                <input className="button-enter" onClick={this.props.authStore.submit} type="button" value="Entrar"></input>
                            </div>

                            <div>
                                <input className="button-enter" onClick={this.props.authStore.logout} type="button" value="Entrar"></input>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

我实现了 hydrate 和所有 mobx-persist 但 localStorage 不保存数据。我一直在搜索互联网，但找不到解决方案。

有人知道为什么会这样吗？

谢谢。

Answer 1

这是因为 mobx-persist 不适用于较新版本的 mobx。

我正在使用的版本：

mobx: ^3.4.1
mobx-persist: ^0.4.1
mobx-react: ^4.3.5

而且效果很好。