Components and state

State that persists, syncs and undoes

Three behaviours that normally cost a fair amount of code: surviving a reload, moving in step with the other open tabs, and having undo. Each one is an attribute.

v-persist

Keeps the scope of a v-data in localStorage and restores it on the next load:

<div v-data="{ theme: 'dark', draft: '' }" v-persist="example-editor">
  <textarea v-model="draft" placeholder="Write something and reload the page"></textarea>
  <p>{ draft.length } characters saved</p>
</div>

The details that matter:

• the key becomes voodoo:persist:example-editor;
• with no value, the key is derived from the page path and the position of the element;
• only the keys the current state declares are restored, so adding a new field to the v-data does not break what was already saved;
• functions, values starting with a dollar sign and circular structures are left out;
• the write is debounced by 120 ms;
• when the element is removed, the pending write is applied and the observer is shut down.

v-sync

Keeps the scope in sync with the other open tabs, live, using BroadcastChannel:

<div v-data="{ counter: 0 }" v-sync="panel">
  <button @click="counter++">{ counter }</button>
</div>

Open the page in two tabs and click: both change together. With no value, the channel name is derived from the position of the element. In browsers with no BroadcastChannel, the directive simply does nothing — the page keeps working, it just does not sync.

For syncing between tabs and surviving a reload, combine the two:

<div v-data="{ filter: '' }" v-persist="list" v-sync="list"></div>

v-history, v-undo and v-redo

Undo and redo for the whole scope, not for one field:

<div v-data="{ text: '', colour: '#5b2ee5' }" v-history="50">
  <div class="linha">
    <input v-model="text" placeholder="Write something">
    <input type="color" v-model="colour">
  </div>
  <div class="linha">
    <button v-undo :disabled="!$history.canUndo">Undo</button>
    <button v-redo :disabled="!$history.canRedo">Redo</button>
    <small>{ $history.size } states kept</small>
  </div>
  <div :style="{ background: colour, color: '#fff', padding: '.5rem', borderRadius: '6px' }">
    { text || 'nothing yet' }
  </div>
</div>

The value of v-history is the snapshot limit, defaulting to 50. A snapshot is taken 300 ms after the last change — which is why typing a whole word becomes one step, rather than one letter per step. Writing after undoing throws the future away, as in any editor.

v-undo and v-redo tie the click to the nearest controller in the tree, so the buttons can sit anywhere inside the scope that has the history.

v-storage, for a single field

For when there is no scope at all and you only want that field not to lose what was written:

<input v-storage="comment-draft" placeholder="Write something and reload">

The value is written on every keystroke into the key voodoo:field:<name> and restored on load.

Storage from JavaScript

V.storage.set('user', { id: 1, name: 'Ann' });   // localStorage with JSON
V.storage.get('user', {});                       // with a default value
V.storage.remove('user');
V.storage.has('user');
V.storage.keys();
V.storage.clear();

V.session.set('step', 2);                        // sessionStorage, same API

V.cookie.set('token', 'abc', { expires: 7, sameSite: 'Lax', secure: true });
V.cookie.get('token');
V.cookie.remove('token');

V.cache.set('products', list, 60000);            // in memory, with an expiry
await V.cache.remember('cep:01001000', 3600000, () => V.http.get('/api/cep/01001000'));

V.url.get('page');                               // query string
V.url.set('page', 2);                            // without reloading
V.url.merge({ sort: 'name', page: 1 });
V.url.all();

Every read and write is safe: in private mode, with the quota full or outside a browser, the calls do not throw — they return the default value and carry on.

Inside the HTML, each one has a matching magic variable: $storage, $session, $cookie, $cache and $url.

<div v-data="{ seen: false }" v-init="seen = $storage.get('tip-seen', false)">
  <p v-show="!seen">
    An important tip that shows up only once.
    <button @click="seen = true; $storage.set('tip-seen', true)">
      Do not show again
    </button>
  </p>
  <button @click="seen = false; $storage.remove('tip-seen')">Show it again</button>
</div>