SyncModel

SyncModel - Хелпер для синхронизации одной модели в разных местах приложения

Использование

Типичный пример использования класса, несколько списков содержащих одну модель, но из разных источников (к примеру списки из asyncData и pinia). При обновлении одного из них, необходимо обновлять второй.

0. Если SyncModel инстанс еще не создан, его нужно создать

export interface IFoo {
  uid: number;
  text: string;
}

export const fooSyncModel = SyncModel.extend<IFoo>({
  eventName: 'foo',
  itemKey: 'uid',
});

1. Подписаться на изменение модели

import { fooSyncModel, type IFoo } from '.../foo-sync-model';
import { useSyncModelSubscribe } from 'shared-front/lib/composition/sync-model';

export default {
  setup() {
    const foos = ref([] as IFoo[]);

    let unsubFoo = () => {};
    onMounted(() => {
      unsubFoo = fooSyncModel.subsribe({
        get: () => foos.value,
      });
    });
    onUnmounted(unsubFoo);

    // Or
    useSyncModelSubscribe(fooSyncModel, {
      get: () => foos.value,
    });
  },

  // Or
  data: () => ({
    foos: [] as IFoo[],
  }),

  mounted() {
    this.$once(
      'hook:beforeDestroy',
      fooSyncModel.subsribe({
        get: () => this.foos,
      }),
    );
  },
};

1.1 Подписка если модель не совпадает с исходной

import { fooSyncModel } from '.../foo-sync-model';


interface IBar {
  uid: number;
  body: string;
}

export default {
  setup() {
    const bars = ref([] as IBar[]);

    onMounted(() => {
      onUnmounted(fooSyncModel.subsribe({
        get: () => bars.value,
        merge: (oldValue, payload) => {
          const newValue: IBar = {
            ...oldValue,
          };

          if (payload.text) newValue.body = payload.text;

          return newValue;
        },
      }));
    });
  },
};

2. Обновление модели

import { fooSyncModel } from '.../foo-sync-model';

export default {
  setup() {
    fooSyncModel.update({
      uid: 1,
      text: 'foo'
    });
    fooSyncModel.updateArray([
      {
        uid: 1,
        text: 'foo 1'
      },
      {
        uid: 2,
        text: 'foo 2'
      },
    ]);
  },
}

constructor/extend

Перед использованием необходимо создать модель с нужными параметрами

const syncModel = new SyncModel({
  eventName: 'forum:theme',
});

interface Theme {
  uuid: string;
  name: string;
}

const syncModel = SyncModel.extend<Theme>()({
  eventName: 'theme',
  itemKey: 'uuid',
});

Подписка на обновления

let theme;

const unSubscribe = syncModel.subscribe({
  get: () => theme,
  set: ({ newValue }) => {
    theme = newValue;
  },
});

Для подписки на обновления нужно указать объект/массив с сущностью и опционально set Возвращается функция для отписки

Если не указан set, для массивов будет использован splice на массиве Для объектов по умолчанию будет применяться lodash/merge

set array

Аргументы сеттера если из геттера вернулся массив и в нем найдена сущность с обновляемым идентификатором

set object

Аргументы сеттера если из геттера вернулся объект и у сущностей совпадают идентификаторы

merge example

interface IFoo {
  id: number;
  text: string;
}
interface IBar {
  id: number;
  body: string;
}

const fooModel = SyncModel.extend<IFoo>()({
  eventName: 'foo',
});

const bars: IBar[] = [];

const unSubscribe = fooModel.subscribe({
  get: () => bars,
  merge: (oldValue, payload) => {
    const newValue: IBar = {
      ...oldValue,
    };

    if (payload.text) newValue.body = payload.text;

    return newValue;
  },
});

Отписка от обновлений

const unSubscribe = syncModel.subscribe(...);

...

unSubscribe();

Для отписки от обновлений нужно вызвать функцию возращенную из метода subscribe

Обновление сущностей

interface Theme {
  id: number;
  name: string;
  body: string;
}

syncModel.update({
  id: 1,
  name: 'New name',
});
syncModel.updateArray([
  {
    id: 1,
    name: 'New name',
  },
  {
    id: 2,
    name: 'New name',
  }
]);

Обновление сущностей осуществляется через вызов методов update/updateArray, API полностью идентичны, но updateArray принимает массив сущностей для обновления.

Модификаторы

syncModel.update({
  id: 1,
  name: 'New name',
}, { source: 'vuex' });
syncModel.updateArray([
  {
    id: 1,
    name: 'New name',
  },
  {
    id: 2,
    name: 'New name',
  }
], { source: 'vuex' });

Так же у обновлений могут быть модификаторы