class
todostore
report() ". ` +
`progress: $/$`;
} addtodo(task) ); }}
const todostore = new todostore();
複製**
當我們去建立乙個todostore，他擁有乙個todos集合，現在我們往這個todostore裡新增一些東西，為了明顯起見，就呼叫todostore.report
todostore.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());
複製**
同時，completedtodoscount 屬性應該被自動派生，使用 @observable 和 @computed 裝飾器來做這些事情：
class
observabletodostore
@computed get completedtodoscount()
@computed get report() ". ` +
`progress: $/$`; }
addtodo(task) );
}} const observabletodostore = new observabletodostore();
複製**
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 官網
狀態管理庫 MobX 和 react
class todostore report progress addtodo task const todostore new todostore 當我們去建立乙個 todostore，他擁有乙個 todos 集合，現在我們往這個 todostore 裡新增一些東西，為了明顯起見，就呼叫 todo...
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 ...