Избегайте цикла зависимостей при использовании пользовательских вспомогательных функций с Vuex - PullRequest
0 голосов
/ 27 мая 2019

Обобщенная структура моего модуля vuex:

import {
  myFunction1,
  myFunction2,
  ...
} from '../../helpers.js'

const moduleApp = {
 state: { ... },
 getters: {
   getter1: (state, getters) => (i) => myFunction1(i),
   getter2: ...
 },
 mutations: { ... },
 actions: { 
   action1: function ({ commit, getters}, i) {
     myFunction2(i)
   },
   action2: ...
 },
}

export default moduleApp

Я импортирую myFunction1 () и myFunction2 () из helpers.js , который выглядит следующим образом:

import store from './store/store.js'

// myFunction1 description here...
export function myFunction1(i) {
  ...
  const a = store.getters.someGetter(i)
  ...
  store.commit('firstMutation', payload)
},

// myFunction2 description here...
export function myFunction2(i) {
  ...
  const b = store.getters.otherGetter(i)
  ...
  store.commit('secondMutation', payload)
},

Приложение работает нормально, без ошибок в консоли, но eslint этот код не нравится из-за импорта: store.js -> helpers.js -> moduleApp -> store. JS

Возможное решение здесь, это реструктурировать код в moduleApp и helpers.js так, как мы даже не получаем доступ к store внутри вспомогательных функций, делая их чистый

actions: { 
   action1: function ({ commit, getters}, i) {
     const a = getters.someGetter(i)
     const b = getters.otherGetter(i)
     const c = getters.anotherGetter(i)
     payload = myFunction2(a, b, c)
     commit('myMutation', payload)
   },
   action2: ...
 },

Я не хочу этого делать, потому что в моем случае вспомогательные функции будут иметь слишком много аргументов, и такая реструктуризация требует времени. С другой стороны, вспомогательные функции должны быть охвачены шут-тестами, и я думаю, лучше, чтобы они были чистыми.

Желаемый результат: избавиться от ошибки import / no-cycle и при этом покрыть вспомогательные функции с помощью jest-тестов.

...