死在第一步系列

mobx?需要使用decorator?修飾器語法? 但項(xiàng)目默認(rèn)是不支持的? ?此時(shí)我們需要配置以下

一 創(chuàng)建項(xiàng)目后? 先使用? npm run eject?彈出webpack配置? 否則我們的packge.json?沒有我們需要的配置項(xiàng)

此時(shí)我們的package.json?的最后就會有我們需要的babel配置

注意:?在mac系統(tǒng)上如果對這個(gè)項(xiàng)目進(jìn)行過操作,npm run eject可能會報(bào)出錯(cuò)誤? 此時(shí)使用

git add .(add后空格?點(diǎn))

git commit -am "Save before ejecting"

再使用npm run eject即可解決

windows上沒有這個(gè)問題

package.json

二.?安裝支持裝飾器所需依賴:? ? npm i --save-dev babel-plugin-transform-decorators-legacy

三.?安裝? @babel/plugin-proposal-decorators

現(xiàn)在修飾器語法應(yīng)該沒問題了? 開始裝mobx

四.安裝Mobx?和 mobx-react

npm install mobx --save? ??

npm install mobx-react --save

五 .配置 package.json

package.json

現(xiàn)在運(yùn)行項(xiàng)目? ?就不會報(bào)錯(cuò)了

六 .現(xiàn)在建一個(gè)store.js?存儲數(shù)據(jù)?其中可以使用@observalbe?和 @action來聲明數(shù)據(jù)和?方法

store.js

七:現(xiàn)在就可以訪問store中的數(shù)據(jù)了

component/index.js

最后把 component/index.js?導(dǎo)入 APP.js就可以了? ?

注意?要在類的上方使用修飾器 @observer?聲明這個(gè)組件是一個(gè)被監(jiān)聽的組件? 否則?數(shù)據(jù)不能隨之改變?

結(jié)果截圖

點(diǎn)擊按鈕之前

點(diǎn)擊按鈕之后

可以看到? 在index中訪問到了 store.js中的數(shù)據(jù)? 并且可以修改并實(shí)時(shí)響應(yīng)