當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

mobx笔记

發布時間：2024/9/27 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 mobx笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

入門案例

1、環境搭建

創建項目

mkdir my-app cd my-app npm init -y

安裝依賴

cnpm i webpack webpack-cli -D cnpm i html-webpack-plugin -D cnpm i babel-loader @babel/core @babel/preset-env -D cnpm i @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties -D cnpm i @babel/plugin-transform-runtime -D cnpm i @babel/runtime -S cnpm i mobx -S

構建項目結構

按照以下目錄結構創建文件

編寫 index.html 文件：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body></body> </html>

編寫 webpack.config.js 配置文件

const path = require('path'); const HtmlWebPackPlugin = require('html-webpack-plugin');module.exports = {mode: 'development',entry: path.resolve(__dirname, 'src/index.js'),output: {path: path.resolve(__dirname, 'dist'),filename: 'main.js'},module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env'],plugins: [//支持裝飾器["@babel/plugin-proposal-decorators", { "legacy": true }],["@babel/plugin-proposal-class-properties", { "loose" : true }],['@babel/plugin-transform-runtime']]}}}]},plugins:[new HtmlWebPackPlugin({template: 'public/index.html',filename: 'index.html',inject: true})] }

在 package.json 文件中配置打包命令：

{"scripts": {"build": "webpack --mode production"} }

2、Mobx核心API

下面的代碼需要在 src/index.js 中完成。

2.1、observable可觀察的狀態

import {observable} from 'mobx' // 聲明 const map = observable.map({a: 1, b: 2}); // 設置 map.set('a', 11); // 獲取 console.log(map.get('a')); console.log(map.get('b')); // 刪除 map.delete('a'); console.log(map.get('a')); // 判斷是否存在屬性 console.log(map.has('a'));

object

import {observable} from 'mobx' // 聲明 const obj = observable({a: 1, b: 2}); // 修改 obj.a = 11; // 訪問 console.log(obj.a, obj.b);

array

import {observable} from 'mobx' const arr = observable(['a', 'b', 'c', 'd']); // 訪問 console.log(arr[0], arr[10]); // 操作 arr.pop(); arr.push('e');

基礎類型

import {observable} from 'mobx'/ const num = observable.box(10); const str = observable.box('hello'); const bool = observable.box(true); // 獲得值 console.log(num.get(), str.get(), bool.get()); // 修改值 num.set(100); str.set('hi'); bool.set(false); console.log(num.get(), str.get(), bool.get());

2.2、 observable裝飾器

import { observable } from 'mobx'class Store{@observable arr = [];@observable obj = {a: 'htllo'};@observable map = new Map();@observable str = 'hello';@observable num = 123;@observable bool = false; }const store = new Store();console.log(store); console.log(store.obj.a); console.log(store.num);

注意：vscode編譯器中，js文件使用裝飾器會報紅。解決方式：

在根目錄編寫 jsconfig.json

{"compilerOptions": {"module": "commonjs","target": "es6","experimentalDecorators": true},"include": ["src/**/*"] }

2.3、對 observables 作出響應

computed

計算值是可以根據現有的狀態或其它計算值衍生出的值, 跟vue中的computed非常相似。

import { observable, computed } from 'mobx'var name = observable.box("John");var upperCaseName = computed(() =>name.get().toUpperCase() );//name的屬性值 console.log("name:",name.get()); console.log("轉換后:",upperCaseName.get());//對computed返回值做監聽 var disposer = upperCaseName.observe_(change => {console.log("監聽到數據變化：",change.newValue,change.oldValue) });//對observable觀察的屬性做修改 name.set("Dave"); name.set("Lily");

autorun

import { observable, computed, autorun } from 'mobx'const arry = observable([1,2,3])const result = computed(()=>{return arry.reduce((total,item)=>{return total + item}) }) //得到計算后的結果 console.log(result.get());//會先觸發一次監聽，然后每次修改 arry 都會觸發 autorun(()=>{console.log('監聽到修改的結果：', result.get()); })//修改 observable 被觀察對象的值 arry.push(4) arry.push(5)

2.4、改變 observables狀態

import { observable, action } from 'mobx'class Store {@observable num = 10@action add(){return this.num += 1} }const store = new Store()console.log(store.add());

3、案例應用

在react中使用mobx，需要借助mobx-react。

它的功能相當于在react中使用redux，需要借助react-redux。

首先來搭建環境：

create-react-app react-app cd react-app npm run eject npm i @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties -D npm i mobx mobx-react -S

修改package.json中babel的配置：

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

注意：vscode編譯器中，js文件使用裝飾器會報紅。解決方式：

在根目錄編寫寫jsconfig.json

{"compilerOptions": {"module": "commonjs","target": "es6","experimentalDecorators": true},"include": ["src/**/*"] }

在 src 目錄下創建 store.js ，作為項目的全局狀態管理

import {observable, computed, action} from 'mobx'class Store {@observable num = 10@computed get sumOne() {return this.num += 1}@action add = ()=>{console.log(this);return this.num += 10} }const store = new Store()export default store

在其他組件中就可以使用了，例如在 index.js 中使用

import React from 'react'; import ReactDOM from 'react-dom'; import store from './store';console.log(store.num); console.log(store.sumOne); console.log(store.add());ReactDOM.render(<div>hello</div>,document.getElementById('root'));

總結

以上是生活随笔為你收集整理的mobx笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

笔记
mobx