2
Nach api Anrufspeicher Datenänderungen werden in der Ansicht nicht reflektiert, hier sind die Codes:Mobx Speicher in Browser nicht reflektiert ändert
store.js
import axios from 'axios';
import {encrypt, decrypt} from '../utils/pgp.js'
import {observable, action, computed, runInAction} from "mobx";
export var appState = observable({
bunny: []
});
appState.loadBunny = action(function(bugs){
bugs.forEach(async data => {
let temp = {};
temp['id'] = data.id;
temp['site_url'] = data.site_url;
temp['tag'] = data.tag;
temp['email'] = await decrypt(sessionStorage.getItem('key'), data.email);
temp['username'] = await decrypt(sessionStorage.getItem('key'), data.username);
temp['password'] = await decrypt(sessionStorage.getItem('key'), data.password);
temp['note'] = await decrypt(sessionStorage.getItem('key'), data.note);
temp['created_at'] = data.created_at;
temp['updated_at'] = data.updated_at;
runInAction("update state after decrypting data",() => {
this.bunny.push(temp);
});
});
});
appState.fetch = async function() {
let xoxo = await axios.get('/api/vault/', {
headers: {'Authorization': "JWT " + sessionStorage.getItem('token')}
});
this.loadBunny(xoxo.data);
}
app.js
ReactDOM.render(
<Router history={browserHistory} >
<Route path="passwords" store={appState} onEnter={keyRequired} component={PasswordsTable} />
</Route>
</Router>,
document.getElementById('app')
);
PasswordsTable.js
import React from 'react';
import axios from 'axios';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import {observer} from 'mobx-react';
@observer
export default class Passwords extends React.Component {
componentDidMount =() => {
this.props.routes[1].store.fetch();
}
render() {
return (
<div>
<BootstrapTable data={this.props.routes[1].store.bunny} striped={true} hover={true} condensed={true} pagination={true} search={true}>
<TableHeaderColumn dataField="id" isKey={true}>ID</TableHeaderColumn>
<TableHeaderColumn dataField="site_url" dataSort={true}>URL</TableHeaderColumn>
<TableHeaderColumn dataField="email">Email</TableHeaderColumn>
<TableHeaderColumn dataField="username">Username</TableHeaderColumn>
<TableHeaderColumn dataField="password">Password</TableHeaderColumn>
<TableHeaderColumn dataField="note">Note</TableHeaderColumn>
<TableHeaderColumn dataField="tag">Tag</TableHeaderColumn>
<TableHeaderColumn dataField="created_at">Created At</TableHeaderColumn>
<TableHeaderColumn dataField="updated_at">Updated At</TableHeaderColumn>
</BootstrapTable>
</div>
)
}
}