12. Installation and use of mobx 6, enable decorator syntax

1. Download related packages

npm install mobx mobx-react --save
npm install -D
  @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties
  @babel/plugin-proposal-private-methods @babel/plugin-proposal-private-property-in-object

2. To configure babel file (.babelrc)

"plugins": [
    ...
    ["@babel/plugin-proposal-decorators", {
     "legacy": true }],
    ["@babel/plugin-proposal-class-properties", {
     "loose": true }],
    ["@babel/plugin-proposal-private-methods", {
     "loose": true }],
    ["@babel/plugin-proposal-private-property-in-object", {
     "loose": true }],
    ...
]

// If it is ts project , Need to be in tsconfig.json Add this sentence to

{
    
    "compilerOptions": {
    
        ...
        "experimentalDecorators": true,
        ...
    }
}

3. newly build store Folder , And create index.tsx Master file and related store class , The relevant code is as follows
   ● index.tsx

import ListStore from './ListStore';

const stores = {
    
  ListStore,
};

export {
     stores };
export default stores;

● Create a new one ListStore Test class

import {
     action, makeObservable, observable, computed } from 'mobx';

class ListStore {
    
  @observable count: number = 0;
  @observable selectUserList: Array<{
     name: string; key: string }> = [];

  @action.bound
  add() {
    
    this.count += 1;
  }

  @action.bound
  sub() {
    
    this.count -= 1;
  }

  @computed
  get countComputedVal() {
    
    return this.count * 2;
  }

  @action.bound
  handleSelectUserList(userList: Array<{
      name: string; key: string }>) {
    
    this.selectUserList = userList;
  }

  constructor() {
    
    makeObservable(this);
  }
}

export default new ListStore();

4. Import index.tsx Main input file , And configuration

import React from 'react';
import {
     createRoot } from 'react-dom/client';
import {
     Provider } from 'mobx-react';

import {
     ConfigProvider } from 'antd';
import zhCN from 'antd/lib/locale/zh_CN';
import moment from 'moment';
import App from './app';
import 'moment/locale/zh-cn';
moment.locale('en');

import stores from '@/store';

import 'antd/dist/antd.less';
import './global.less';


const root = createRoot(document.getElementById('root'));


root.render(
  <Provider {
    ...stores}>
    <ConfigProvider
      locale={
    zhCN}
      getPopupContainer={
    (node) => document.body}
    >
      <App />
    </ConfigProvider>
  </Provider>,
);
5.  Used on the page mobx The state of , The code is as follows ：
import {
     inject, observer } from 'mobx-react';
import React from 'react';
import {
     Button } from 'antd';

function Home(props) {
    
  const {
     ListStore } = props;
  const {
     count, add, sub, selectUserList } = ListStore;

  return (
    <div className="btn-div">
      <div> The number :{
    count}</div>
      <Button onClick={
    add}>+</Button>
      <Button onClick={
    sub}>-</Button>
      <div>
         Selected personnel :{
    selectUserList.length > 0 ? selectUserList.map((v) => v.name).join('、') : ' There is no selected person '}
      </div>
    </div>
  );
}

export default inject('ListStore')(observer(Home));