$30 off During Our Annual Pro Sale. View Details »

Vuex Plugin 101 (Full Ver.)

Vuex Plugin 101 (Full Ver.)

Cyan

May 23, 2018
Tweet

More Decks by Cyan

Other Decks in Programming

Transcript

  1. VUEX PLUGIN 101
    CHO

    View Slide

  2. VUE PLUGIN
    USERS

    View Slide

  3. VUEX PLUGIN
    USERS
    .. , . .

    View Slide

  4. VUEX
    PLUGIN
    DEVELOPER

    View Slide

  5. EASY TO
    MAKE

    View Slide

  6. Logger
    https://codesandbox.io/s/887m806p5l

    View Slide

  7. subscribe

    View Slide

  8. https://3kqr0kjm95.codesandbox.io/

    View Slide

  9. State
    Snapshot
    1
    State
    Snapshot
    2
    State
    Snapshot
    3
    State
    Snapshot
    4
    State
    Snapshot
    5
    Versions

    Current
    Version Redo
    replaceState(state: Object)
    Undo

    View Slide

  10. Other Implementations

    View Slide

  11. subscribe
    After
    State
    Changed

    View Slide

  12. subscribeAction
    subscribe
    Ver. 2.5.0+

    View Slide

  13. Avoid Duplicate API Requests

    View Slide

  14. http://reactivex.io/documentation/operators/debounce.html

    View Slide

  15. View Slide

  16. View Slide

  17. https://p4yvo81lq.codesandbox.io/

    View Slide

  18. VUEX PLUGIN ≠ ASPECT

    View Slide

  19. subscribeAction
    subscribe
    Nonstop

    View Slide

  20. Vuex Plugin
    Subscriber
    Set
    Changes
    Window
    Listener
    Listening to
    Changes
    vuex-shared-mutations
    Vuex State

    Vuex State

    Subscribing To
    Changes
    Set
    Changes
    Tab 1 Tab 2
    Local
    Storage

    View Slide

  21. https://davestewart.github.io/vuex-pathify/

    View Slide

  22. https://github.com/vuex-orm/vuex-orm

    View Slide

  23. Check
    More

    View Slide

  24. View Slide