废话不多说直接上干货!!(使用这个要先启用对实验性语法“decorator -legacy”的支持,否则会报错)
npm下载mobx
在终端输入以下代码
npm install mobx@5.15.4 mobx-react@6.3 -s
在src文件夹里面新建一个store文件夹,并建立两个js文件,我这里建的是index.js和store1.js
在store1中写入
import { observable, action } from 'mobx';
class UseStore {
@observable user = 1;
@action login() {
console.log(123);
}
}
export default UseStore;
在index里面写:
import store1 from './store1';
let mystore = new store1();
const stores = {
mystore,
};
export default stores ;
最后再src的最外层的index.js里面配置以下
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'mobx-react';
import Store from './store/index';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<Provider {...Store }>
<App />
</Provider>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
就可以正常使用了
调用方法:在需要调用的js里面:
import { inject, observer } from 'mobx-react'
@inject('之前定义的名字,我这里定义的是mystore')
@observer
class Name extends React.Component{
render(){
console.log(this.props.mystore)
//通过this.props.mystore调用
return
}
}