Learn TypeScript 3 by Building Web Applications

Simple store pattern

For simple applications, the Vue.js documentation proposes a simple store pattern: https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch.

The idea behind this simple pattern is to hold the application state in a store, acting as a single source of truth for the whole application. This store can be as simple as a global object holding the data state, along with methods that allow us to modify it (so as to keep those modifications under control).

Here's how this looks in practice (we've taken the following example from the official Vue guide):

const store = { debug: true, state: { message: 'Hello!' }, setMessageAction (newValue) { if (this.debug) console.log('setMessageAction triggered with', ...