vuex-relations
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    addStoreRelations

    Функция позволяет накрутить хайтек в Vuex store такой, какой не снилось.

    В проекте были встречены проблемы синхронизации actions и mutations между store модулями. Так же был всякий ненужный бойлерплейт, как например подтягивание данных с сервера в created хуке компонента, регистрирующего store модуль.

    В результате явилась миру эта функция.

    arguments

    Функция принимает как аргумент объект следующего вида:

        interface IStoreMiddlewareVariables {
          requiredRelations?: AvailableRelations | AvailableRelations[]
          watchRelations?: IStoreRelationships
          watchActions?: IStoreActionsSubscribe
          moduleName: string
          initDispatch: string
        }
     
        //, где
     
        type WatchFunction = <T>(newValue: T, oldValue: T) => boolean
        type ActionWatchFunction = (action: any, state: any) => boolean
        
        interface IRelationDesc {
          trigger: WatchFunction
          dispatchFunc: string
        }
        
        interface IActionRelationDesc {
          trigger?: ActionWatchFunction
          dispatchFunc: string
          beforeOrAfter?: 'before' | 'after' // по дефолту стоит 'after'
        }
        
        type AvailableRelations = 'currentClubId'
        
        export interface IStoreRelationships {
          [key: string]: IRelationDesc | undefined
        }
        
        export interface IStoreActionsSubscribe {
          [key: string]: IActionRelationDesc
        }  
     
    • moduleName - имя store модуля, к которому подвяжутся зависимости
    • initDispatch - имя action, который запустится после создания экземпляра компонента, к которому привязан store модуль. Сюда чаще всего идут запросы к серверу, по подтягиванию данных для таблиц и тд и тп
    • requiredRelations - state, который обязательно должен существовать, прежде чем запустится initDispatch и все остальное, в случае, если этот state, по какой-либо причине не будет существовать, initDispatch дождется его появления, прежде чем запустится. Пока что это все сделано только для currentClubId, но если понадобится для чего-то ещё, то можно дописать
    • watchRelations - триггеры, после которых нужно запустить функцию, переданную сюда в качестве аргумента dispatchFunc
    • watchActions - actions, после (или до) которых нужно запускать dispatchFunc, переданную сюда в качестве аргумента

    Пример

    Пример использования в модуле "Герои и группы":

        import { addStoreRelations } from '@/utils/helpers/vuexMiddleware'  
        import { getDefaultWatchTrigger } from '@/store/defaultWatchTriggers'
        import { moduleName } from '@/views/App/Heroes/store/index'
     
        addStoreRelations({
          moduleName,
          initDispatch: 'getOptions',
          watchRelations: {
            ...getDefaultWatchTrigger('currentClubId', 'getOptions')
          },
          watchActions: {
            'quickEditorChild/createChild': {
              dispatchFunc: 'getOptions',
              beforeOrAfter: 'after'
            }
          },
          requiredRelations: 'currentClubId'
        })

    Пример триггера на дефолтном триггере для currentClubId:

          import { IStoreRelationships } from '@/utils/helpers/vuexMiddleware'
          
          type WatchTriggers = 'currentClubId'
          
          export const getDefaultWatchTrigger = (name: WatchTriggers, dispatchFunc: string): IStoreRelationships => {
            return {
              [name]: {
                dispatchFunc,
                trigger: (() => {
                  switch (name) {
                    case 'currentClubId':
                      return defaultCurrentClubIdTrigger
                  }
                })()
              }
            }
          }
          
          export const defaultCurrentClubIdTrigger = (newValue: any, oldValue: any) => {
            return newValue !== oldValue && !!newValue && !!oldValue
          }

    В этом примере после создания основного компонента "Герои и группы", к которому привязан store, будет запущен action getOptions, который подтягивает все необходимые данные с сервера, НО, getOptions дождется, пока currentClubId придет с сервера в state, а уже потом подтянет все, что нужно.

    После создания нового героя запустится action getOptions для обновления данных в таблице и тд.

    И после смены клуба currentClubId администратором также запустится action getOptions, для обновления всех необходимых данных для нового клуба.

    В итоге получилась понятный переиспользуемый метод для подобных вещей.

    Install

    npm i vuex-relations

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    83.9 kB

    Total Files

    33

    Last publish

    Collaborators

    • vetalin