Are there ESlint rules for Vuex modules?

Viewed 310

In my application's codebase, there are many Vuex getters which return functions, similar to the following:

const getters = {
  getStateScopedToApp: (state, getters) => appId => {
    // ... do stuff with appId
    return state.foo[appId];
  }
};

This was originally done because appId here comes from route parameters which are only available in components, and because due to the way data is loaded for the application, returning an object keyed by appId would either result in some values being incorrect or missing.

I have since found that this is an antipattern - getters which return functions close over the entire state and are thus updated any time state changes at all, effectively ruining Vuex's caching on the results of computed properties. What I was wondering is if there are any standard ESLint rules for Vuex modules that I could leverage to find and warn on patterns like this, to make them easier to track down and remove in favor of more cache-friendly getters. I couldn't find any on Google.

0 Answers
Related