Question

我的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

我正在从 helpers.js 导入 myFunction1（）和 myFunction2（），如下所示：

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 ，使它们成为 pure ：

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 错误，同时能够通过玩笑测试涵盖辅助函数。

在Vuex中使用自定义辅助函数时避免依赖周期

0 个答案: