class todostore
report() ". ` +
`progress: $/$`;
} addtodo(task) ); }}
const todostore = new todostore();
當我們去建立乙個 todostore，他擁有乙個 todos 集合，現在我們往這個 todostore 裡新增一些東西，為了明顯起見，就呼叫 todostore.reporttodostore.addtodo("read mobx tutorial");
console.log(todostore.report());
todostore.addtodo("try mobx");
console.log(todostore.report());
todostore.todos[0].completed = true;
console.log(todostore.report());
todostore.todos[1].task = "try mobx in own project";
console.log(todostore.report());
todostore.todos[0].task = "grok mobx tutorial";
console.log(todostore.report());
太巧了，這就是 mobx 能為你做的事情。自動執行只在 state 改變的時候觸發，就好像 excel 中的圖表只在單元格資料改變時更新一樣。為了達到這個目標，todostore必須成為可觀測的（observable）才行，讓我們來改一些**。
observable & computed
同時，completedtodoscount 屬性應該被自動派生，使用 @observable 和 @computed 裝飾器來做這些事情：class observabletodostore
@computed get completedtodoscount()
@computed get report() ". ` +
`progress: $/$`; }
addtodo(task) );
}} const observabletodostore = new observabletodostore();
在這個構造器中，我們使用autorun包裹了乙個打出report的小函式。autorun裡的東西首先會執行一次，然後當其中的函式有observable的資料發生變化時，會再次執行。 這裡我們使用了todos屬性，每次todos變化了我們就列印出新的東西。 測試一下
observabletodostore.addtodo("read mobx tutorial");
observabletodostore.addtodo("try mobx");
observabletodostore.todos[0].completed = true;
observabletodostore.todos[1].task = "try mobx in own project";
observabletodostore.todos[0].task = "grok mobx tutorial";
@observable good =
@computed get totalprice()
// 陣列
@observable goodslist = [,]
問題？解決方案
export default class good
@computed
get totalprice()
}
@action
addgood(...args)
很多人把mobx當作另外乙個redux，但是它僅僅是乙個庫，不是乙個什麼架構。上面的例子還是需要程式設計師自己去組織邏輯和store或者控制器什麼的.
10分鐘極速入門 mobx
sf @computed使用
react 官網
原文發布時間為：2023年06月27日
pandaaa
狀態管理庫 MobX 和 react
class todostore report progress addtodo task const todostore new todostore 複製 當我們去建立乙個todostore，他擁有乙個todos集合，現在我們往這個todostore裡新增一些東西，為了明顯起見，就呼叫todosto...
React專案中使用Mobx狀態管理（二）
並上一節使用的是普通的資料狀態管理，不過官方推薦使用裝飾器模式，而在預設的react專案中是不支援裝飾器的，需要手動啟用。官方參考 一 新增配置 官方提供了四種方法,方法一 使用typescript，顧名思義該方法是專案使用typescript時的配置 方法二 使用babel preset mobx...
React專案中使用Mobx狀態管理（一）
1 安裝 1 yarn add mobx mobx react 2 新建store index.js，存放資料 以下思路僅限於父子元件的簡單應用 1 import from mobx 2 觀察器 狀態 4 timer 1005 方法8 9 方法 11 console.log increase 13 ...