mobx管理工具

  • Post author:
  • Post category:其他


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

点我

)

}

}



版权声明:本文为cdxgg1102225556原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。