How do I specify to WebStorm the canonical definition of the Vuex store?

Problem

I have a Vue project that uses Vuex for state management. Parts of the Vuex store are often mocked in unit tests (Vitest).

When Vuex stores are defined in both the main production code and in test files, WebStorm's static analysis sometimes considers the mock, test store as the canonical store definition. Type hinting and code navigation incorrectly refer to the mock.

How can I tell WebStorm that the production instance of the Vuex store is canonical for static analysis purposes?

Reproduction steps

I created a GitHub repo that demonstrates the issue simply by opening the project in WebStorm. The steps I took to create the example project are:

npx create vue@latest    # create-vue 3.18.2

# In the config wizard:
#   Project named "webstorm-vuex-vitest".
#   Only the "Vitest" feature is added.
#   All example code is skipped.

cd webstorm-vuex-vitest
npm i -P vuex            # vuex 4.1.0

Once installed, I opened the project in WebStorm 2025.2.4 and added the following code:

src/main.js

import { createApp } from 'vue'
import { createStore } from 'vuex'
import App from './App.vue'

const store = createStore({
    state: {
        count: 0
    },
    mutations: {
        increment (state) {
            state.count++
        },
        decrement (state) {
            state.count--
        }
    }
})

const app = createApp(App)
app.use(store)
app.mount('#app')

App.vue

<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';

const store = useStore();
const count = computed(() => store.state.count);
const increment = () => store.commit('increment'); // Try jump-to-definition here...
const decrement = () => store.commit('decrement'); // ...and here.
// Only decrement jumps to the production store declaration in main.js.
</script>

<template>
  <h1>You did it!</h1>
  <p>
    Count: {{ count }}
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </p>
</template>

<style scoped></style>

src/tests/App.spec.js

import { describe, it, expect } from 'vitest'

import { mount } from '@vue/test-utils'
import { createStore } from 'vuex'
import App from '../App.vue'

const store = createStore({
    state: {
        count: 0
    },
    mutations: {
        increment (state) { // Note that decrement is not defined in the mock store.
            state.count++
        }
    }
})

describe('App', () => {
  it('mounts renders properly', () => {
    const wrapper = mount(App, {
        global: {
            plugins: [store]
        }
    })
    expect(wrapper.text()).toContain('You did it!')
  })
})

Attempted solutions

I have tried switching the Vue Language Server settings around in WebStorm's settings. All of the following configurations yield the same result:

• Auto (@vue/language-server 2.2.10)
• Classic TypeScript Service (@vue/language-server 2.2.10)
• Enable service-powered type engine
• Vue LS 3.0 preview

I have also tried excluding the test folder and/or files (by extension pattern). While this strategy does keep WebStorm from reading test files for the store definition, it also removes test files from the search results and the open-file dialog. I want the test files to remain visible—just not referenced as canonical for Vuex store definitions.

If this behavior is an inherent limitation of WebStorm's Vue integration, I would appreciate a reference to the offending code in the integration's GitHub repository if possible. Workaround suggestions are appreciated as well.

Since posting this question on Stack Overflow, I've also created a YouTrack issue, WEB-75465, in case this behavior has no user workarounds.