nextjs使用mobx教程

nextjs使用mobx教程

1. 安装资源

• npm install mobx mobx-react --save 或者 yarn add mobx mobx-react

2. 新增store.js文件

import { observable, action } from 'mobx'

class IndexStore {
  @observable count = 0
  @action changeCount(val) {
    this.count += val
  }
}

export default new IndexStore()

3. 在组件中引入使用

import React from 'react'
import store from '@/store'
import { observer } from 'mobx-react'

@observer
class Index extends React.Component {
  render() {
    return (
      <div className='index'>
        <Header />
        <main>
          <button onClick={() => store.changeCount(10)}>+</button>
          <h1>{store.count}</h1>
          <button onClick={() => store.changeCount(-10)}>-</button>
        </main>
      </div>
    )
  }
}

export default Index

4. 此时编辑器会报暂不支持装饰器的错误，如下配置解决

• 安装依赖yarn add @babel/plugin-proposal-decorators --dev
• 在.babelrc配置

    {
      "presets": ["next/babel"],
      "plugins": [
        [
          "@babel/plugin-proposal-decorators",
          {
            "legacy": true
          }
        ]
      ]
    }

• 最后在vscode打开设置搜索experimentalDecorators,打上勾,恭喜你，可以愉快的使用mobx啦~