Tips and tricks

Serializing and deserializing

If the model data should be mutated by the UI, than its normal representation may not match the server-side (serialized) representation. For example:

// internal data representation
interface Data {
  id: number;
  age: string;
  credentials: {
    firstName: string;
    lastName: string;
  };
  phones: Array<{ value: string }>;
}

// serialized data representation
interface EncodedData {
  id: number;
  age: number;
  credentials: {
    firstName: string;
    lastName: string;
  };
  phones: string[];
}

So, an encoded data must be transformed (normalized) to the Data type when loading the model data:

Overwise, when saving model data, reverse transformation (serialization) is necessary:

TIP

The save mixin working only with the normal data representation, therefore any data object must be transformed outside of the model class.

Example:

// file: @/api.ts
import type { EncodedData as Person } from '@/models/person';

async function loadPerson(id: number): Promise<Person> {
  const response = await fetch(`/persons/${id}`);
  const encoded = await response.json();

  return encoded;
}

async function createPerson(req: Omit<Person, 'id'>): Promise<Person> {
  const response = await fetch('/persons/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(req)
  });
  const encoded = await response.json();

  return encoded;
}

// inside Service, Pinia, Vuex, etc.
import { type EncodedData, type Data, type ModelType as PersonModel, create } from '@/models/person';
import { loadPerson, createPerson } from '@/api';
import { normalize, denormalize } from '@/transforms/person';

async function load(id: number): Promise<PersonModel> {
  let response;

  try {
    response = await loadPerson(id);
  } catch (e) {
    console.error('could not load a person', e);

    throw e;
  }

  const instance = create(normalize(response), true, {
    mixinType: 'save',
    create: async (data: Data): Promise<Data> => {
      const encoded = await createPerson(denormalize(data));

      return normalize(encoded);
    }
  });
}