세션 저장 영역에 Mobx 상태를 저장하는 방법

Question

Redux를위한 것이고 Mobx를 위해 수행하는이 https://github.com/elgerlambert/redux-localstorage을 근본적으로 수행하려고합니다. 그리고 바람직하게는 sessionStorage를 사용하고 싶습니다. 최소한의 상용구만으로도이를 달성 할 수있는 쉬운 방법이 있습니까?

Answer 1

가장 쉬운 방법은 관찰 가능한 속성이 변경 될 때마다 mobx "자동 실행"을 트리거하는 것입니다. 그렇게하려면 my answer to this question을 따라갈 수 있습니다. 하지만 반드시, https://mobx.js.org/best/store.html

이 값의 변화를 검출하는 청소기 방법을 보여줍니다

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); 
    } 
} 

Answer 2

여기에서 예를 게시 :

은 당신이 시작하는 데 도움이해야 여기에 몇 가지 예제 코드를 놓을 게요 로컬 저장소.

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(); 
    } 
} 

Answer 3

내 코드는 localStorage 만 지원하지만 아주 쉽게 수정할 수 있어야합니다.

https://github.com/nightwolfz/mobx-storage

Answer 4

당신이 자신에 의해 작성되어 mobx-sync을 시도 할 수 있음.