它有多个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}
点我
)
}
}