關於Mobx中裝飾器語法的環境配置

1.彈出項目配置

npm run eject

此處注意，若彈出項目配置失敗，請先執行如下兩行代碼（若沒有安裝git則請跳過，本人是在安裝git的狀況下解決問題的）

1.git add .
2.git commit -m "init"

　　

2.安裝裝飾器所需依賴

npm install --save-dev babel-plugin-transform-decorators-legacy

　　

3.安裝應用配置

npm install @babel/plugin-proposal-decorators

 

4.安裝mobx和mobx-react

1.npm install mobx --save
2.npm install mobx-react 

 

5.配置package.json

"babel"{
	"plugins":[
	[
	  "@babel/plugin-proposal-decorators",
	  {
		  "legacy":true
	  }
	],
	[
	  "@babel/plugin-proposal-class-properties",
	  {
		  "loose":true
	  }
	  ]
	  ],
	 "presets":[
	 "react-app"
	 ]
},

　　

6.環境測試

　　1.新建store.js模擬本地數據庫

import {observable,action} from "mobx";
class Store {
    id = Math.random();
    @observable title="飛飛";
    @observable finished = false;
    @action cTitle =()=>{
        this.title="麥扣扣"
    }
}
export  default  new Store()

　

　　2.新建App.js進行調用

import React, { Component } from 'react';
import Store from "./store";
import {observer} from "mobx-react"

@observer
class App extends Component {
  render() {
    return (
      <div>
        this is Index
        <p>{Store.id}</p>
        <p>{Store.title}</p>
        <button onClick={Store.cTitle}>測試</button>
      </div>
    );
  }
}
export default App;

　　

　　3.運行結果

　　

　　4.環境搭建成功