//app.jsx
const store = {
counterStore,
testStore
}
render () {
return (
<Provider store={store}>
<Index />
</Provider>
)
}
注:今日测试taro中的app文件写标签是不生效的,也可能下次测试就可以生效,滑稽脸
//store/counter.js
import { observable } from 'mobx'
const counterStore = observable({
counter: 0,
brr:'brr',
counterStore() {
this.counter++
},
increment() {
this.counter++
},
decrement() {
this.counter--
},
incrementAsync() {
setTimeout(() => {
this.counter++
}, 3000)
}
})
export default counterStore
在组件使用中注意一定要引用,
目前测试发现假设在counter文件写曝光两个store,第二个不生效,唯一想到的方法是新建一个js文件,重新引用。
还有,一个组件是可以使用两个stoer中的内容,但前提是你需要在app.js
中引用,
在组件使用@inject是可以这样一次引用两个store的
@inject('counterStore','testStore')
@inject('counterStore')
@inject('testStore')
//pages/index/index.jsx
import Taro, { Component} from '@tarojs/taro'
import { View, Button, Text } from '@tarojs/components'
import { observer, inject } from '@tarojs/mobx'
import './index.scss'
import Example from '../index/component/example/example'
import Example2 from '../index/component/example2/example2'
@inject('counterStore','testStore')
// @inject('testStore')
@observer
class Index extends Component {
config = {
navigationBarTitleText: '首页'
}
increment = () => {
const { counterStore } = this.props
counterStore.increment()
}
decrement = () => {
const { counterStore } = this.props
counterStore.decrement()
}
incrementAsync = () => {
const { counterStore } = this.props
counterStore.incrementAsync()
}
getTestStore=()=>{
const {testStore} = this.props
// testStore.arr
console.log(testStore.arrHandle)
}
render () {
const { counterStore: { counter}} = this.props
return (
<View className='index'>
<Button onClick={this.increment}>+</Button>
<Button onClick={this.decrement}>-</Button>
<Button onClick={this.incrementAsync}>三秒后+1</Button>
<Text>{counter}</Text>
</View>
)
}
componentDidMount () {
console.log(this.props.testStore.brr)
}
export default Index
2020.4.20施工完毕