mobx-persist 不会将我的数据保存在本地存储中
mobx-persist not persist my data in local storage
最近我在使用 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 不保存数据。我一直在互联网上搜索,但找不到解决方案。
有人知道为什么会这样吗?
谢谢。
这是因为 mobx-persist 不适用于较新版本的 mobx。
我使用的版本:
mobx: ^3.4.1
mobx-persist: ^0.4.1
mobx-react: ^4.3.5
而且效果很好。
最近我在使用 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 不保存数据。我一直在互联网上搜索,但找不到解决方案。
有人知道为什么会这样吗?
谢谢。
这是因为 mobx-persist 不适用于较新版本的 mobx。
我使用的版本:
mobx: ^3.4.1
mobx-persist: ^0.4.1
mobx-react: ^4.3.5
而且效果很好。