mobx使用

最新推荐文章于 2023-07-30 21:13:29 发布

原创最新推荐文章于 2023-07-30 21:13:29 发布 · 224 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

博客围绕React项目中store的使用展开，介绍了store的文件结构，如store/index.js和store/archivesReorganize ，还提及在顶级根目录引入App.js以及在组件中使用和获取store的相关内容。

store

store/index.js

import ArchivesReorganize from './archivesReorganize'
const reorganize = new ArchivesReorganize()
export default {
    user:userInfo,
    reorganize:reorganize
}

store/archivesReorganize

import {observable, action} from 'mobx';
class ArchivesReorganize {
  @observable  reorganizeList= undefined;
  @observable  currentVolume = undefined;
  @action setReorganizeList(value) {
    this.reorganizeList = JSON.parse(JSON.stringify(value));
  };
  @action setCurrentVolume(value){
    this.currentVolume = JSON.parse(JSON.stringify(value));
  }
}
export default ArchivesReorganize;

顶级根目录引入App.js

import React from 'react';
import { Provider } from 'mobx-react'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import stores from './stores'
import Main from './pages/Main/index'
import Login from './pages/Login/index';
function App() {
  return (
    <Provider {...stores}>
      <BrowserRouter>
        <Switch>
          <Route path='/Login' component={Login} />
          <Route path='/main' component={Main} />
        </Switch>
      </BrowserRouter>
    </Provider>
  );
}
export default App;

组件中使用

import store from "../../stores";
const {reorganize} =store
@inject((stores) => ({}))
class Index extends React.Component {
	constructor(props) {
    	super(props);
	}
	save = (data)=>{
		reorganize.setCurrentVolume(data)
	}	
	render() {
	}
}
export default Index;

组件中获取

console.log(JSON.parse(JSON.stringify(reorganize.currentVolume)))