死在第一步系列
mobx?需要使用decorator?修飾器語(yǔ)法? 但項(xiàng)目默認(rèn)是不支持的? ?此時(shí)我們需要配置以下
一 創(chuàng)建項(xiàng)目后? 先使用? npm run eject?彈出webpack配置? 否則我們的packge.json?沒(méi)有我們需要的配置項(xiàng)
此時(shí)我們的package.json?的最后就會(huì)有我們需要的babel配置
注意:?在mac系統(tǒng)上如果對(duì)這個(gè)項(xiàng)目進(jìn)行過(guò)操作,npm run eject可能會(huì)報(bào)出錯(cuò)誤? 此時(shí)使用
git add .(add后空格?點(diǎn))
git commit -am "Save before ejecting"
再使用npm run eject即可解決
windows上沒(méi)有這個(gè)問(wèn)題
package.json
二.?安裝支持裝飾器所需依賴:? ? npm i --save-dev babel-plugin-transform-decorators-legacy
三.?安裝? @babel/plugin-proposal-decorators
現(xiàn)在修飾器語(yǔ)法應(yīng)該沒(méi)問(wèn)題了? 開(kāi)始裝mobx
四.安裝Mobx?和 mobx-react
npm install mobx --save? ??
npm install mobx-react --save
五 .配置 package.json
package.json
現(xiàn)在運(yùn)行項(xiàng)目? ?就不會(huì)報(bào)錯(cuò)了
六 .現(xiàn)在建一個(gè)store.js?存儲(chǔ)數(shù)據(jù)?其中可以使用@observalbe?和 @action來(lái)聲明數(shù)據(jù)和?方法
store.js
七:現(xiàn)在就可以訪問(wèn)store中的數(shù)據(jù)了
component/index.js
最后把 component/index.js?導(dǎo)入 APP.js就可以了? ?
注意?要在類的上方使用修飾器 @observer?聲明這個(gè)組件是一個(gè)被監(jiān)聽(tīng)的組件? 否則?數(shù)據(jù)不能隨之改變?
結(jié)果截圖
點(diǎn)擊按鈕之前
點(diǎn)擊按鈕之后
可以看到? 在index中訪問(wèn)到了 store.js中的數(shù)據(jù)? 并且可以修改并實(shí)時(shí)響應(yīng)
