Vuex Snippets (Visual Studio Code)

Everyday Vuex 4 patterns for VS Code: store and modules, state, getters, mutations, actions, plugins, binding helpers, the Composition API and tests.

中文文档

Targets Vuex 4 on Vue 3. Snippets fire in .vue, TypeScript and JavaScript files, each one scoped to where its code can actually live — a store or module file offers file templates, a component offers the binding helpers and this.$store calls.

Prefixes

Every snippet answers to two triggers:

The API name is the prefix — mapState, store.commit, createStore, useStore, store.watch. What you are about to write is the prefix, so there is nothing to memorize first. Patterns with no single API behind them share a vuex… stem instead: vuexModule, vuexPlugin, vuexState, vuexTestAction. Whole-file scenarios add a shared vuexScenario stem, so typing it lays out every scenario at once.
The short alias still works — ms, cm, cs, us, mg, ma. These are the prefixes this extension has published for years, and every one of them still maps to the same snippet it always did.

Prefixes repeat on purpose. Type mapState and the completion list lays out all four variants; type store.commit and you get all three. VS Code triggers on the prefix and identifies each snippet by its name, which is why every name spells out its variant in parentheses.

Store

Prefix	Alias	Inserts
`app.use`	`vuexInstall`	Application entry — install the store so `useStore()` and `this.$store` resolve
`createLogger`	`clg`	The logger plugin, with `collapsed`, `filter` and `transformer`
`createStore`	`cs`	A complete store file: modules, strict mode in development, logger plugin
`createStore`	`cs4ts`	A complete typed store file: `State`, an `InjectionKey`, a `useStore` wrapper
`useStore`	`us`	Fetch the installed store inside `setup()`
`useStore`	`us4ts`	Fetch it through the typed wrapper, so `store.state` keeps its type

State

Prefix	Alias	Inserts
`mapState`	`imms`	Import `mapState()` and spread it into `computed`
`mapState`	`ms`	Map state under a different name, or derive a value from it
`mapState`	`msa`	Map root state properties keeping their names
`mapState`	`msn`	Bind to one namespaced module so mapped names stay short
`state`	`cst`	State as a factory function, so a reused module gets a fresh object
`store.state`	`storeState`	Read the root state
`store.state`	`storeStateNs`	Read a module's state, which stays nested under the module name
`this.$store.state`	`storeStateVm`	Read the root state from an Options API component
`vuexModel`	`vfm`	Two-way computed for `v-model` — getter reads, setter commits

Getters

Prefix	Alias	Inserts
`getters`	`cg`	A complete getters file for a module
`getters`	`gp`	One getter
`getters`	`gpm`	A method-style getter that returns a function taking an argument
`getters`	`gpr`	A getter with `state, getters, rootState, rootGetters`
`mapGetters`	`immg`	Import `mapGetters()` and spread it into `computed`
`mapGetters`	`mg`	Map getters as computed properties, keeping their names
`mapGetters`	`mgd`	Map a getter under a different name
`mapGetters`	`mgn`	Bind to one namespaced module
`store.getters`	`storeGetters`	Read a registered getter
`store.getters`	`storeGettersNs`	Read a namespaced getter, which takes bracket access
`this.$store.getters`	`storeGettersVm`	Read a getter from an Options API component

Mutations

Prefix	Alias	Inserts
`mapMutations`	`immm`	Import `mapMutations()` and spread it into `methods`
`mapMutations`	`mm`	Map mutations as methods that commit
`mapMutations`	`mmd`	Map a mutation under a different method name
`mapMutations`	`mmn`	Bind to one namespaced module
`mutationTypes`	`cmt`	A mutation-name constant, so a typo fails at import
`mutationTypes`	`mpt`	A mutation keyed by an imported constant
`mutations`	`cmu`	A complete mutations file for a module
`mutations`	`mp`	One mutation
`store.commit`	`cm`	Commit a mutation
`store.commit`	`cmo`	Commit as one object, `type` included in the payload
`store.commit`	`cmp`	Commit with a payload
`this.$store.commit`	`cmvm`	Commit from an Options API component
`this.$store.commit`	`cmpvm`	Commit with a payload from an Options API component

Actions

Prefix	Alias	Inserts
`actions`	`ap`	One action
`actions`	`apd`	An action with `context` destructured
`actions`	`asap`	An asynchronous action
`actions`	`ca`	A complete actions file: fetch / create / update / remove
`mapActions`	`imma`	Import `mapActions()` and spread it into `methods`
`mapActions`	`ma`	Map actions as methods that dispatch
`mapActions`	`mad`	Map an action under a different method name
`mapActions`	`man`	Bind to one namespaced module
`store.dispatch`	`da`	Dispatch an action
`store.dispatch`	`dao`	Dispatch as one object, `type` included in the payload
`store.dispatch`	`dap`	Dispatch with a payload
`this.$store.dispatch`	`davm`	Dispatch from an Options API component
`this.$store.dispatch`	`dapvm`	Dispatch with a payload from an Options API component

Modules

Prefix	Alias	Inserts
`createNamespacedHelpers`	`cnh` / `helper`	Bind all four map helpers to one namespace up front
`vuexGlobalAction`	`aph`	An action registered under its global name from inside a module
`vuexModule`	`cm`	A namespaced module split across four files
`vuexModule`	`cms`	A whole namespaced module in one file
`vuexRootCommit`	`cmr`	Commit a root mutation with `{ root: true }`
`vuexRootDispatch`	`dar`	Dispatch a root action with `{ root: true }`

Plugins

Prefix	Alias	Inserts
`vuexPlugin`	`cp`	A store plugin subscribing to mutations
`vuexPlugin`	`cpa`	A plugin watching actions — `before`, `after`, `error`
`vuexPlugin`	`cpp`	Persist the state to `localStorage` and restore it on start-up

Store instance methods

Prefix	Alias	Inserts
`store.hasModule`	`storeHasModule`	Check whether a module is registered
`store.hotUpdate`	`storeHotUpdate`	Hot-swap the store definition, keeping the state
`store.registerModule`	`storeRegisterModule`	Register a module after the store exists
`store.replaceState`	`storeReplaceState`	Swap the whole root state
`store.subscribe`	`storeSubscribe`	Run a handler after every mutation
`store.subscribeAction`	`storeSubscribeAction`	Run a handler before every dispatched action
`store.subscribeAction`	`storeSubscribeActionObject`	Hook `before`, `after` and `error`
`store.unregisterModule`	`storeUnregisterModule`	Remove a dynamically registered module
`store.watch`	`storeWatch`	Watch a value derived from state or getters

Composition API

Prefix	Alias	Inserts
`vuexAction`	`saa`	Wrap an action as a plain function for the template
`vuexGetter`	`sag`	Read a getter through `computed`
`vuexGetter`	`sagn`	Read a namespaced getter through `computed`
`vuexMutation`	`sam`	Wrap a mutation as a plain function for the template
`vuexState`	`sas`	Read state through `computed`, so it stays tracked
`vuexWatch`	`saw`	React to a store change with Vue's `watch`

Tests

Prefix	Alias	Inserts
`vuexTestAction`	`vta`	Test an action with a fake context and a spy `commit`
`vuexTestGetter`	`vtg`	Test a getter as a plain function
`vuexTestMutation`	`vtm`	Test a mutation as a plain function

Scenarios

Whole-file answers to the questions an API listing cannot answer — what a module that loads a remote list actually looks like, how the store is reached where there is no component. Type vuexScenario to see all of them at once.

Prefix	Alias	Inserts
`vuexAsyncModule`	`vuexScenario`	A module loading a remote list, tracking `loading` and `error` beside the data
`vuexLazyModule`	`vuexScenario`	A route that registers its store module from the route's own chunk
`vuexOptionsComponent`	`vuexScenario`	A complete component reading a namespaced module through the binding helpers
`vuexOutsideComponent`	`vuexScenario`	Reach the store from a router guard or an interceptor, with no component around
`vuexScriptSetup`	`vuexScenario`	A complete component reading a namespaced module from the Composition API
`vuexTypedModule`	`vuexScenario`	A module typed through `Module<S, R>`, so state is typed in its own handlers

Companion extensions

Vue 3 Snippets — Vue 3's own API and Vue Router.
Vue 2 Snippets — Vue 2's own API.
Vue Ecosystem Snippets — Pinia, VueUse, server state, forms, i18n and head metadata.
JavaScript Code Snippet — MDN-based JavaScript snippets.
JavaScript Comment Snippet — JSDoc and ESDoc comments.

References

Vuex 4 documentation
Pinia — the recommended store for new Vue 3 projects. This extension is for the projects already on Vuex.

License

MIT

Vuex Snippets

XiangHongAi