Vuex Helper

中文文档

If you want Vuex firepower in VS Code, this extension is built to bring the full toolkit to one place: discover, complete, navigate, inspect, and validate your store workflow with confidence.

VS Code extension supporting Vue 2's Vuex and Vue 3's Pinia. It provides Go to Definition, Code Completion, Hover Information, Diagnostics, Find References, and manual reindex support for Vuex (supporting State, Getters, Mutations, and Actions). It also supports Pinia store import navigation and definition-side reverse references.

⭐ If you find this extension helpful, please give it a star on GitHub! Your support is greatly appreciated.

Features

1. Go to Definition

Jump directly to the definition of Vuex store properties from your components.

Demo: Jump to Definition

• Support: this.$store.state/getters/commit/dispatch, imported store instance access (e.g. import store from '@/store')
• Map Helpers: mapState, mapGetters, mapMutations, mapActions
• Namespace: Supports namespaced modules.
• Optional Chaining: Supports ?. in store access chains.
• Pinia Store Imports: Go to Definition on an imported Pinia store factory opens the corresponding defineStore implementation. Single-store files are resolved by implementation, so the local name does not need to follow useXxxStore.

2. Find References

Find explicit Vuex API references from the store definition itself.

Demo: Vuex Find References

• Definition-Side Summary: Hover a state, getter, mutation, or action definition to see a Used by N references summary with the first few statically resolvable usages.
• Show All References: Click Show all in the definition hover to open a compact QuickPick of indexed Vuex references.
• Native References: VS Code reference requests are backed by the same reverse index, so reference lookup stays responsive without rescanning the workspace from scratch.
• Supported Usage Forms: Covers mapState / mapGetters / mapMutations / mapActions, $store.state/getters/commit/dispatch, imported store instance access, object-style commit/dispatch({ type }), and store-internal commit/dispatch references.
• Binding-Aware Analysis: Vuex helper aliases from ESM imports or CommonJS destructuring are supported. Locally shadowed helpers and imported Store names are excluded instead of being treated as Vuex usage.
• Store Handler Aliases: Mutation/getter parameters and destructured action-context fields are resolved by handler position and source property, so aliases such as mutation(localState) or { rootGetters: globalGetters } work across completion, definition, hover, diagnostics, and references.
• Scope: Mapped component usages such as this.userName, this.setUserName(), {{ userName }}, or :user-name="userName" are intentionally excluded from reference results to avoid noisy and ambiguous matches.

Pinia support covers definition-side reverse references within the following boundaries:

Demo: Pinia Find References

• Store Definitions: Indexes defineStore('id', { state, getters, actions }), state() method syntax, setup stores returning refs, computed values, and functions, plus TypeScript generic / satisfies wrappers and CommonJS require('pinia') bindings.
• Store Usage: Finds direct and optional-chain member access, action calls, aliased storeToRefs(store) destructuring, direct state/getter/action destructuring, and useXxxStore() direct destructuring. Direct state/getter destructuring is indexed as an explicit read, but storeToRefs() remains the recommended reactive form.
• Store Internals: Indexes Option Store getter state.foo access and getter/action this.foo access while respecting nested function scope.
• State Updates: Indexes both $patch({ foo: value }) object keys and $patch((state) => state.foo = value) callback access.
• Options API Helpers: Supports Pinia mapState, mapWritableState, and mapActions with arrays, object string aliases, and import aliases. Function mapper callbacks are supported for mapState, matching Pinia's API.
• Vue Templates: Indexes <script setup> Store and destructured bindings used in interpolations and directive expressions. v-for, v-slot, and expression-local variables are excluded when they shadow Store names.
• Setup Composables & Composed Stores: Recognizes explicitly imported Vue / VueUse reactive calls and keeps otherwise unclassified returned composable members referenceable. Store-to-store usage is indexed like other Store consumption.
• Store Import Navigation: Go to Definition works on imported Pinia store factories and resolves by the imported file's defineStore implementation.
• Imports: Supports named store imports and default-imported single-store files, local aliases, tsconfig / jsconfig paths, and @/ style aliases. Reverse-reference indexing also supports destructured CommonJS require bindings for Pinia helpers and Store factories.
• File Types: Scans .vue, .js, .jsx, .mjs, .cjs, .ts, .tsx, .mts, and .cts files.
• Activation: Activates for a compatible Vue 3 + Pinia dependency pair. Deterministic semver ranges and prerelease versions are supported; dependency tags such as latest and next are not guessed.
• Scope Boundary: Nuxt auto-imports, dynamic / namespace Pinia imports, toRefs(store), and forward navigation / hover from store.foo to its member definition remain outside this extension's Pinia scope. Built-in APIs without a concrete Store member definition, such as $subscribe, $onAction, and $state, are not reported as member references.

3. Intelligent Code Completion (IntelliSense)

Intelligent suggestions for Vuex keys and mapped methods.

Demo: Context-Aware Completion

• Context Aware: Suggests actions for dispatch, mutations for commit, etc.
• Namespace Filtering: When using mapState('user', [...]), it correctly filters and shows only items from the user module.
• Namespaced Helper Aliases: Supports createNamespacedHelpers aliases even in larger components where the helper declaration and usage are far apart.
• Import / Require Aliases: Recognizes aliased Vuex helpers from ESM and CommonJS while rejecting local functions or parameters that merely reuse helper names.
• Mapped Methods: Type this. to see mapped methods (e.g., this.increment mapped from ...mapMutations(['increment'])).
• Bracket Notation: Support this['namespace/method'] syntax for accessing mapped properties.
• Map Helpers: Supports array and object syntax (e.g., ...mapActions({ alias: 'name' })).
• Imported Store Completion: Supports store.state/getters/commit/dispatch after direct store import.

4. Hover Information & Type Inference

View JSDoc documentation, details, and inferred types without leaving your code.

Demo: Hover Documentation

• JSDoc Support: Displays comments written in /** ... */ format from your store definitions.
• Type Inference: Automatically infers and displays the type of State properties in hover tooltips (e.g., (State) appName: string).
• Mapped Methods: View documentation for mapped methods.
• Details: Shows the type (State/Mutation/etc.) and a clickable definition path.
• Imported Store Hover: Supports hover info for direct store import usage.

5. Store Internal Usage

Also supports code completion, jump to definition, and hover information within the Vuex Store.

Demo: Store Internal Code Completion, Jump to Definition, Hover Information

• Module Scope: When writing actions in a module (e.g., user.js), suggestions for commit and dispatch are automatically filtered to the current module's context.
• Action Context Object: Supports context.state, context.getters, context.rootState, and context.rootGetters in store files.
• Handler Parameter Aliases: Resolves mutation/getter parameters by handler position and action-context destructuring by source property, rather than requiring literal names such as state or rootGetters.
• Object-Style Handlers: Supports Vuex object-style action handlers such as actions: { someAction: { handler(ctx) {}, root: true } }.

6. Diagnostics

Highlights invalid Vuex store references as warnings directly in your editor.

• Map Helpers: Validates string arguments in mapState, mapGetters, mapMutations, mapActions.
• Commit / Dispatch: Checks first argument of commit() and dispatch() calls.
• Store Access: Validates first-segment $store.state/getters dot access and bracket notation.
• Store Internal: Validates store-file state.xxx access plus rootState / rootGetters references.
• Global Getter Conflicts: Warns when root or non-namespaced modules register duplicate global getter names.
• Comment Lines: Skips common commented-out references on full comment lines.

7. Reindex Command

Run "Vuex Helper: Reindex Store" from the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) to manually trigger a full store re-index. The command completes only after indexing and the diagnostics refresh have finished.

Configuration

You can configure the extension via the VS Code Settings UI or .vscode/settings.json:

• vuexHelper.storeEntry (default: empty, auto-detect): Path to your Vuex store entry file. Supports aliases like @/store/index.js, workspace-relative paths, and absolute paths. When left empty, the extension tries to discover the store by parsing src/main.{js,ts} or src/index.{js,ts} for new Vue({ store }). This setting only applies after a Vue 2 + Vuex project has been detected from package.json.

Supported Syntax

• Helper Functions:

  ...mapState(['count'])
  ...mapState('user', ['name']) // Namespaced
  ...mapState({ alias: 'count' }) // Object aliasing
  ...mapState({ count: state => state.count }) // Arrow function
  ...mapState({ count(state) { return state.count } }) // Regular function
  ...mapActions({ add: 'increment' }) // Object aliasing
  ...mapActions(['add/increment'])
  import { mapState as readState } from 'vuex'
  const { mapActions: bindActions } = require('vuex')
  

• Store Methods:

  this.$store.commit("SET_NAME", value);
  this.$store.dispatch("user/updateName", value);
  this.$store.commit(`user/SET_NAME`, value); // Static template literals are supported
  this.$store.commit({ type: "user/SET_NAME" }, value); // Object-style commits are supported
  import store from "@/store";
  store.commit("SET_NAME", value);
  store?.getters?.["others/hasNotifications"];
  commit("increment", null, { root: true }); // Root namespace switch
  // Dynamic Vuex paths are not guessed:
  // this.$store.commit(`${moduleName}/SET_NAME`, value);
  // this.$store.commit(moduleName + "/SET_NAME", value);
  actions: {
    publishProfile: {
      handler(context) {
        return context.state.ready;
      },
      root: true
    }
  },
  mutations: {
    SET_READY(localState) {
      localState.ready = true; // Parameter aliases are resolved by handler position
    }
  }
  

• Component Methods:

  this.increment(); // Mapped via mapMutations
  this.appName; // Mapped via mapState
  

• Pinia References:

  const profile = useProfileStore();
  const { nickname } = storeToRefs(profile);
  const { grow } = profile;
  
  profile.age;
  profile?.grow();
  profile.$patch({ age: 2 });
  profile.$patch((state) => { state.nickname = 'Ada'; });
  
  ...mapState(useProfileStore, ['nickname']);
  ...mapWritableState(useProfileStore, { editableAge: 'age' });
  ...mapActions(useProfileStore, { advance: 'grow' });
  
  const { storeToRefs: toStoreRefs } = require('pinia');
  const { useProfileStore: createProfile } = require('./stores/profile');
  

Feature Coverage

Release Notes

2.0.0

Feature release focused on navigation, references, and packaging hardening:

• Added: Vuex definition hovers now show indexed Used by reference summaries and a compact Show all QuickPick for statically resolvable Vuex API references.
• Added: VS Code native reference requests now use the same reverse index, avoiding repeated full-workspace scans for definition-side references.
• Added: Pinia definition-side reverse references for standard defineStore option/setup stores, including store.foo, store.foo(), storeToRefs(store), default-imported single-store files, and direct action destructuring usages.
• Added: Pinia store import definition navigation opens the corresponding defineStore implementation, including single-store files whose local import name is not useXxxStore.
• Added: Pinia reverse references now cover Option Store this/state access, mapState / mapWritableState / mapActions, both $patch forms, direct state/getter destructuring, Vue template expressions, setup composable members, and composed Stores.
• Added: Pinia Store and reference indexing now cover .mjs / .cjs files and destructured CommonJS require bindings for defineStore, Store factories, storeToRefs, and map helpers.
• Added: Hover Defined in paths are clickable links, so you can jump to the definition directly from the hover popup.
• Fixed: Mapped Vuex fields no longer shadow local variables with the same name, avoiding false Vuex hover/definition results in component methods and computed functions.
• Fixed: Dynamic commit/dispatch paths such as `${moduleName}/SET_NAME` and moduleName + '/SET_NAME' are no longer guessed as static Vuex references, while static template literals like `user/SET_NAME` still resolve normally.
• Fixed: createNamespacedHelpers aliases remain available across larger component windows, so namespaced callback completions stay scoped even when the helper declaration is far from usage.
• Fixed: Pinia helper imports, Store factories, storeToRefs, and defineStore are matched by their real bindings, preventing local parameters or functions with the same name from producing false references.
• Fixed: Pinia template indexing excludes v-for, v-slot, and expression-local shadowed variables, and explicit @/* path mappings no longer fall back incorrectly to src/ when resolution fails.
• Fixed: Vuex map helpers, imported Store instances, and Store handler parameters now follow their actual bindings and handler positions, preventing local shadowing and non-standard parameter names from breaking completion, definition, hover, diagnostics, or references.
• Improved: this alias detection now supports aliases bound to this in local scope, not only hard-coded names.
• Improved: Object-style commit/dispatch({ type }) references participate in definition, hover, diagnostics, and indexed reference lookup.
• Improved: Activation now requires a compatible dependency pair in the workspace package.json: Vue 2 + Vuex or Vue 3 + Pinia. If both state libraries are declared, the Vue major selects the matching one.
• Improved: Vue version detection accepts deterministic semver ranges and prerelease versions without guessing latest / next tags.
• Improved: Pinia reference indexing keeps document and per-file caches bounded, prefilters template expressions, and removes stale references in batches for faster incremental updates.
• Improved: Vuex and Pinia definition lookups reuse indexes built during Store indexing, avoiding repeated all-item scans in hover and reference requests.
• Improved: Vuex reverse references scan modern JavaScript and TypeScript extensions and apply per-file limits after successful resolution, so unresolved candidates do not consume valid-reference capacity.
• Improved: Manual reindex requests are awaitable, and Host verification reuses one ready workspace index instead of adding fixed one-second waits before every Vuex scenario.
• Improved: Store entry auto-detection no longer depends on the runtime glob package; it checks the supported src/main|index.{js,ts} entry candidates directly.
• Improved: VSIX packaging excludes generated tests, temporary files, internal docs, historical packages, and local GIF assets. Marketplace demo images are served through the configured GitHub raw base URL instead of being bundled.
• Security: Removed the runtime glob dependency and added a serialize-javascript override to keep npm audit clean.

1.2.2

Patch release focused on configuration refresh reliability and release verification stability:

• Fixed: Store entry configuration refresh flow is now more reliable after vuexHelper.storeEntry changes, reducing stale entry state and missed reindex behavior.
• Improved: Parser regression coverage was tightened around computed mutation key expectations to keep store-index behavior aligned with real fixtures.
• Improved: VS Code host test runs are now pinned to a fixed test host version, making release verification more reproducible across environments.

1.2.1

Patch release focused on diagnostics and completion correctness:

• Fixed: Diagnostics now only warn on first-level store references, avoiding false positives on deep member access such as state.items.push(...), state.name.toUpperCase(), and optional-chain deep access.
• Fixed: Store parsing now resolves exported-const computed keys more reliably, so aliases like export const KEY = 'name' can be indexed correctly in real Vuex modules.
• Fixed: Object-syntax helper completion no longer duplicates the left-side key when completing after alias:, so choosing a suggestion inserts only the value string.
• Improved: Added unit and host regression coverage for deep-access diagnostics, computed-key indexing, and object-value completion behavior.

1.2.0

Feature-focused release centered on deeper store-internal Vuex awareness:

• Added: Store-internal context.state, context.getters, context.rootState, and context.rootGetters support across completion, definition, hover, and diagnostics.
• Added: Nested module namespace inheritance so child module getters / mutations / actions follow a namespaced parent even when the child omits namespaced: true.
• Added: Duplicate global getter conflict diagnostics for root and non-namespaced modules.
• Added: Vuex object-style action handler support, including root: true, omitted root, reordered root / handler, and store-internal provider support inside handler(...).
• Improved: Host regression coverage now exercises the new nested-module and object-style action handler paths with real fixtures.

1.1.1

Bug-fix release focused on definition accuracy and Vuex internal scope handling:

• Fixed: Vuex definition navigation now resolves more reliably for module/root context switches and mapped access paths.
• Fixed: Store-internal completion, definition, hover, and diagnostics now scope getters access to real Vuex callback parameters, reducing false positives and incorrect suggestions inside local functions.
• Improved: Host test stability and fixture alignment were tightened to keep release verification consistent.

1.1.0

Diagnostics and reindex command release:

• Added: Diagnostics provider that highlights invalid Vuex store references (state/getter/mutation/action) as warnings.
• Added: Manual reindex command (vuexHelper.reindex) accessible from the Command Palette.
• Added: Store-file diagnostic coverage for state, rootState, and rootGetters references.
• Improved: Diagnostics now refresh after initial indexing, manual reindex, file saves, and document open/close events.
• Fixed: Reduced diagnostics false positives for helper callback string literals, non-Vuex local dispatch / commit functions, and shadowed local state variables in store files.
• Fixed: Store parsing now ignores nested-scope shadowing for state / getters / mutations / actions / modules, preventing local declarations from polluting module indexes.
• Improved: Activation is skipped when the workspace has no package.json, unless vuexHelper.storeEntry is configured, avoiding false activation while preserving manual setup.

1.0.0

Feature-focused 1.0 release:

• Added: Direct imported store instance support (import store from '@/store') for completion, definition, and hover.
• Added: Optional-chain access coverage (?.) across $store and imported store access patterns.
• Added: Vue host smoke workflow supports Vue extension fallback priority (Volar first, fallback to Vetur).
• Improved: Alias-based store import detection now respects tsconfig/jsconfig paths resolution.
• Improved: Provider/context hot paths are further cached to keep latency stable under real-world fixtures.

0.1.0

Stability, performance, and Vuex edge-case hardening release:

• Versioning: Bumped extension version to 0.1.0 (including lockfile metadata).
• Added: this alias completion support (e.g. const _t = this; _t. / _t?.) for mapped properties and $store access.
• Fixed: Namespaced completion/definition/hover behavior in complex module and helper scenarios.
• Fixed: Nested state leaf resolution now prefers exact leaf nodes and avoids unnecessary parent fallback.
• Improved: Reindex strategy now skips unrelated file saves and uses shared mapper/cache instances to reduce redundant parsing.
• Improved: Path alias resolution tightened to avoid loose-prefix matching risk (e.g. @/* vs @foo/*).
• Improved: Restored lint quality gate and expanded regression tests for optional chaining, alias access, and module-scoped completion.

0.0.2

Enhanced completion features and bug fixes:

• Added: this.xxx mapped property completion for mapState, mapGetters, mapMutations, mapActions
• Added: this['xxx'] bracket notation completion support
• Fixed: ComponentMapper preprocessing for incomplete code (e.g., this. at end of line)
• Fixed: Range calculation for bracket notation completion
• Improved: Removed auto-added parentheses for mutation/action completions

0.0.1

Initial release with features:

• Scoped Logic: Commit and State completions are context-aware inside modules.
• Hover Support: Local state hover tooltips in mutations/getters.
• Improved: Namespace filtering and JSDoc support.