Search code examples
vuexwebstorm

Cannot find declaration to go to Vuex WebStorm?

I added auto import Vuex modules and after that I can't go to Vuex actions/getters/etc from component or another place where I declared.

Now my architecture like this:

  • index.ts
  • store
    • module1.store.ts
    • module2.store.ts
    • module3.store.ts
    • index.ts

store/index.ts:

const requireModule = require.context('.', false, /\.ts$/)
const modules: any = {}

requireModule.keys().forEach(fileName => {
  if (fileName === './index.ts') return

  const moduleName = fileName
    .replace(/(\.\/|\.store\.ts)/g, '')
    .replace(/^\w/, c => c.toLowerCase())
  modules[moduleName] = requireModule(fileName).default || requireModule(fileName)
})

export default modules

index.ts (sibling store):

export default new Vuex.Store({
  modules,
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

If I use anybody action in component It's work but If I want to go this action from component I can't:

enter image description here

Every store module has:

export default {
  namespaced: true,
  state,
  actions,
  getters,
  mutations
}
Solution

  • Vuex completion in WebStorm is based on the static code analysis. Unfortunately the syntax used by you is too complex to be statically analyzed, as the module name is dynamically produced from the file name.

    Please see comments in WEB-45228 for possible workarounds