mobx管理工具

它有多个store

首先下载关于它的依赖
cnpm i mobx@5.15.7 -S
cnpm i mobx-react@6.2.2 -S //在src文件夹里的index.js引入

所以应该有一个有关他的文件夹

import { observable, computed, action, toJS } from ‘mobx’
/*
observable 是声明的 computed有get也有set action是修改的 toJS是查看的
*/

import { getList } from ‘@/servers’
class Store {
@observable num = 10
@observable str = ‘玛德’
@observable arr = []
@observable obj = { name : ‘wrk’ }
@observable bool = false

@computed get total () { //使用get的时候 得调用
return this.num + 50
}
set total (n) { //使用set的时候 相当于监听
console.log(‘走走total’)
this.num = 456
}

@action bar(){
this.num = 5
}
@action async one(){
const arr1 = await getList()
this.arr = arr1.data.result.list

console.log(toJS(this.arr));

}
}
export default new Store()

在src里的index.js中

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import Router from ‘@/router’;
import ‘@/style/index.less’
import { Provider } from ‘mobx-react’
import store from ‘@/mobx’

ReactDOM.render(
<Provider {…store}>

,
document.getElementById(‘root’)
);

在使用的时候：：

import { observer, inject } from ‘mobx-react’

export default
@inject(‘niang’) //引入哪些mobx的文件
@observer //这个是更新
class Niang extends React.Component {
pop = () => {
this.props.niang.one()
}
render() {
const { niang } = this.props
const { arr } = this.props.niang
// console.log(toJS(arr));
return (

{niang.num}

点我

)
}
}