State Management in Vue

Variety can be good, but sometimes difficult to navigate.
  • Simple/local state (in a component) is usually for trivial scenarios, where the effort of other kinds doesn’t justify their use. Visibility or if a dropdown or a modal isOpen. Simple stuff that’s used locally or as a prop.
  • Complex/shared/application state is for more intricate scenarios. Maybe stored as a global POJO — the currentUser, hasPermissionX, etc. The trouble is that anything can mutate it and it often takes significant time to trace the change origin. The lifecycle of a POJO is raw and undefined — great for flexibility, but hard to manage and difficult to reason about.
  • Persistent state is the most valuable kind of data — we worry about it if the servers crash, or data center goes down — the currentUser’s email address, their personal data … whatever your app stores long term.
    We should know: what it is — a Schema, where to find it — a home, or source of truth, and How to access it — a familiar and consistent API.

The solution: A Data Access Layer (DAL)

Important details to consider:

Composition

Convenience & Interoperability

  • Solid event systems ✔️
  • Efficient and performant reactivity systems ✔️

Predictability

Integrity

  • Decoupled from templates
  • Easy to use, custom validators
  • Function composition (Moment.js, name-your-lib, etc.)
  • type (string, number, etc.)
  • format (date, email, etc.)
  • minLength, maxLength, pattern, definition and more

Structure

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to develop a web extension for browsers?

Real-time Unique Input Validation with VueJS and Laravel

Wordpress permalinks & Nginx

JavaScript ES2020 has Arrived

Learn GatsbyJS by creating a tourism site -18

Mongoose’s Model.Populate()

Deploy your Node.js + TypeScript backend for free on Heroku!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Caleb Roseland

Caleb Roseland

More from Medium

Installing the Vue i18n CLI plugin for Vue 3 — in a mono repo

Monorepo vue 3 migration

How To Integrate Keycloak in NuxtJs

A Detailed Comparison Between VueJS & ReactJS