Vuex guidelines 🢃1

• category: code • page size: $PLACEHOLDER

TODO: add link, don't remember where I find this guidelines

Mutations

  • Should be the only place to directly update the state
  • Do state changes as side effect
  • Should not have other side effects (requests, async, global state changes, …)
  • May contain logic
  • Should try to do everything that is required to change the old state into a new consistent state
  • Have to be synchronous
  • Main guideline: time-travel using Vue Devtools should work reliably

Actions

  • Separated in modules
  • Handle asynchronous behavior
  • May commit mutations
  • May call other actions (1)
  • May orchestrate multiple mutations & actions, if required
  • Can return a promise to indicate their progress
  • We should avoid using the promise’s payload value directly but always read required values from the store - if required. Example: Not returning API response from created user, because it structure may differ from store.

Components

  • Trigger an “intent” to change some state
  • This may be a mutation or an action
  • Should not contain business logic that makes assumptions about the shape of the store

Whats missing?

  • Validation, where is done? component? mutation?
  • (1) How we can improve this to decouple modules? (Mediator Pattern)