試圖實質上完成這個用於Redux的https://github.com/elgerlambert/redux-localstorage,但是爲Mobx做。最好想使用sessionStorage。是否有一個簡單的方法來完成這與最小的樣板?如何在sessionStorage中保存Mobx狀態
3
A
回答
4
解決這個問題的最簡單方法是在任何可觀察屬性發生變化時觸發一個mobx「autorun」。要做到這一點,你可以按照my answer to this question。
我把一些示例代碼在這裏,應該可以幫助您開始:
function autoSave(store, save) {
let firstRun = true;
mobx.autorun(() => {
// This code will run every time any observable property
// on the store is updated.
const json = JSON.stringify(mobx.toJS(store));
if (!firstRun) {
save(json);
}
firstRun = false;
});
}
class MyStore {
@mobx.observable prop1 = 999;
@mobx.observable prop2 = [100, 200];
constructor() {
this.load();
autoSave(this, this.save.bind(this));
}
load() {
if (/* there is data in sessionStorage */) {
const data = /* somehow get the data from sessionStorage or anywhere else */;
mobx.extendObservable(this, data);
}
}
save(json) {
// Now you can do whatever you want with `json`.
// e.g. save it to session storage.
alert(json);
}
}
2
張貼在這裏的例子:https://mobx.js.org/best/store.html
這顯示了檢測值變化的清潔方法,雖然不一定本地存儲。
import {observable, autorun} from 'mobx';
import uuid from 'node-uuid';
export class TodoStore {
authorStore;
transportLayer;
@observable todos = [];
@observable isLoading = true;
constructor(transportLayer, authorStore) {
this.authorStore = authorStore; // Store that can resolve authors for us
this.transportLayer = transportLayer; // Thing that can make server requests for us
this.transportLayer.onReceiveTodoUpdate(updatedTodo => this.updateTodoFromServer(updatedTodo));
this.loadTodos();
}
/**
* Fetches all todo's from the server
*/
loadTodos() {
this.isLoading = true;
this.transportLayer.fetchTodos().then(fetchedTodos => {
fetchedTodos.forEach(json => this.updateTodoFromServer(json));
this.isLoading = false;
});
}
/**
* Update a todo with information from the server. Guarantees a todo
* only exists once. Might either construct a new todo, update an existing one,
* or remove an todo if it has been deleted on the server.
*/
updateTodoFromServer(json) {
var todo = this.todos.find(todo => todo.id === json.id);
if (!todo) {
todo = new Todo(this, json.id);
this.todos.push(todo);
}
if (json.isDeleted) {
this.removeTodo(todo);
} else {
todo.updateFromJson(json);
}
}
/**
* Creates a fresh todo on the client and server
*/
createTodo() {
var todo = new Todo(this);
this.todos.push(todo);
return todo;
}
/**
* A todo was somehow deleted, clean it from the client memory
*/
removeTodo(todo) {
this.todos.splice(this.todos.indexOf(todo), 1);
todo.dispose();
}
}
export class Todo {
/**
* unique id of this todo, immutable.
*/
id = null;
@observable completed = false;
@observable task = "";
/**
* reference to an Author object (from the authorStore)
*/
@observable author = null;
store = null;
/**
* Indicates whether changes in this object
* should be submitted to the server
*/
autoSave = true;
/**
* Disposer for the side effect that automatically
* stores this Todo, see @dispose.
*/
saveHandler = null;
constructor(store, id=uuid.v4()) {
this.store = store;
this.id = id;
this.saveHandler = reaction(
// observe everything that is used in the JSON:
() => this.asJson,
// if autoSave is on, send json to server
(json) => {
if (this.autoSave) {
this.store.transportLayer.saveTodo(json);
}
}
);
}
/**
* Remove this todo from the client and server
*/
delete() {
this.store.transportLayer.deleteTodo(this.id);
this.store.removeTodo(this);
}
@computed get asJson() {
return {
id: this.id,
completed: this.completed,
task: this.task,
authorId: this.author ? this.author.id : null
};
}
/**
* Update this todo with information from the server
*/
updateFromJson(json) {
// make sure our changes aren't send back to the server
this.autoSave = false;
this.completed = json.completed;
this.task = json.task;
this.author = this.store.authorStore.resolveAuthor(json.authorId);
this.autoSave = true;
}
dispose() {
// clean up the observer
this.saveHandler();
}
}
1
在這裏,你可以使用我的代碼,但它僅支持localStorage的你應該能夠很容易地修改它。
0
可能是你可以嘗試mobx-sync,這是我自己寫的。
相關問題
- 1. 如何在Aptana/Eclipse中保存狀態?
- 2. 如何將狀態保存在AlertDialog中?
- 3. Heroku - 如何保存狀態
- 4. 如何保存Arraylist狀態
- 5. 如何保存WebView狀態?
- 6. 如何保存OnClickListener狀態
- 7. 如何保存狀態UITableViewCell?
- 8. 如何將mobx存儲注入無狀態組件
- 9. 在OnDeactivateAsync中保存狀態
- 10. 在viewpager中保存狀態
- 11. 如何保存動態viewpager中保存的視圖狀態
- 12. 如何保存IsExpanded狀態在ListView
- 13. 在sessionStorage中保存Javascript對象
- 14. 確保MobX狀態樹模型中的接口符合性
- 15. 保存狀態
- 16. SessionStorage保存DIV顯示?
- 17. sales_flat_quote_item中的保存狀態
- 18. 保存狀態在細胞
- 19. angularjs - 如何在sessionStorage中存儲數組?
- 20. 如何在本地存儲中保存切換狀態?
- 21. 如何在Firefox/Chrome中保存選項卡的內存狀態?
- 22. 保存android.app.Application狀態
- 23. RecyclerView保存狀態
- 24. UISlider,保存狀態
- 25. 保存CheckedTextView狀態
- 26. 如何使UserDefaults保存登錄狀態?
- 27. 如何保存UIViewController的狀態?
- 28. 如何保存html頁面的狀態?
- 29. 流星如何保存狀態登錄
- 30. 如何保存CCMenuItemToggle聲音狀態
謝謝!它將如何重新加載頁面重新加載狀態? –
在構造函數中,在調用'autoSave()'之前,您可以從sessionStorage讀取並設置存儲實例上的值。 –
我剛編輯我的答案以提供更完整的解決方案。當然,你仍然需要做一些改變才能使它適合你的情況,但我希望這可以幫助你開始。 –