Vuex Snippet (Visual Studio Code)
用于快捷编写 Vuex (3.x, 4.x.)。
Quickly write Vuex (3.x, 4.x.).
另外按需安装:
Also need to install :
- Vue Basic Snippets，包含 Vue 2 和 3 中共用的
v-* 系列指令、import 组件、指令、服务之类的代码。
Contains code for the v-* family of directives, import components, directives, and services common to Vue 2 and 3.
- Vue 2 Snippets，参考 Vue 2 官方文档示例及测试用例源码。
Using Vue 2 official documentation example and test cases.
- Vue 3 Snippets，参考 Vue 3 官方文档示例及测试用例源码。
Using Vue 3 official documentation example and test cases.
- JavaScript Code Snippet，参考 MDN 文档。
Using MDN documentation.
- JavaScript Comment Snippet，参考 JSDOC、ESDOC 文档，用于便捷编写 JavaScript 注释。
Reference JSDOC, ESDOC documentation for easy writing of JavaScript comments.
- Pinia Snippets，参考 Pinia 官方文档示例。
Using Pinia's official documentation example.
Snippets
- Vuex.Store Constructor Options
- Vuex.Store Instance Properties
- Vuex.Store Instance Methods
- Component Binding Helpers
Store
- Vuex Create a new Store (Vue2) | prefix:
cs4vue2 →
import Vue from 'vue';
import Vuex from 'vuex';
import resources from './modules/resources';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
resources,
},
});
- Vuex Create a new Store | prefix:
cs →
import { createStore, createLogger } from 'vuex';
import resources from './modules/resources';
const debug = process.env.NODE_ENV !== 'production';
export default createStore({
modules: {
resources,
},
strict: debug,
plugins: debug ? [createLogger()] : [],
});
- Vuex Create a new Store (TS) | prefix:
cs4ts →
import { InjectionKey } from 'vue';
import { createStore, useStore as baseUseStore, Store } from 'vuex';
export interface State {
property: any;
}
export const key: InjectionKey<Store<State>> = Symbol();
export const store = createStore<State>({
state: {
property: 'value',
},
});
export function useStore() {
return baseUseStore(key);
}
import { store, key } from './store';
app.use(store, key);
- Vuex useStore (TS) | prefix:
us4ts →
import { useStore } from '@/store';
const store = useStore();
- Vuex useStore | prefix:
us →
import { useStore } from 'vuex';
const store = useStore();
State
- Vuex State | prefix:
state
const state = () => ({
property: 'value',
});
- Vuex store state (this.$store) | prefix:
storeStateVm
this.$store.state.propery
- Vuex store state | prefix:
storeState
store.state.propery
- Vuex import mapState | prefix:
imms
import { mapState } from 'vuex';
- Vuex mapState | prefix:
ms
...mapState({
property: (state) => state.some.nested.module.property,
}),
- Vuex mapState (namespace) | prefix:
msn
...mapState('some/nested/module', {
property: (state) => state.property,
}),
Getters
- Vuex Create Getters | prefix:
cg
export default {
derivedResource(state) {
return ;
},
}
- Vuex Getters property | prefix:
gp
derivedResource(state) {
return ;
},
- Vuex Getters property (Method-Style) | prefix:
gpm
derivedResource: (state) => (payload) => {
return ;
},
- Vuex store getters (this.$store) | prefix:
storeGettersVm
this.$store.getters.propery
- Vuex store getters | prefix:
storeGetters
store.getters.propery
- Vuex import mapGetters | prefix:
immg
import { mapGetters } from 'vuex';
- Vuex mapGetters | prefix:
mg
...mapGetters(['some/nested/module/someGetter', 'someGetter']),
- Vuex mapGetters (namespace) | prefix:
mgn
...mapGetters('some/nested/module', ['someGetter', 'someOtherGetter']),
- Vuex mapGetters (different name) | prefix:
mgd
...mapGetters({
alias: 'someGetter',
}),
Mutations
- Vuex Create Mutations | prefix:
cmu
export default {
mutation(state, payload) {
},
};
- Vuex Mutations property | prefix:
mp
mutation(state, payload) {
},
- Vuex import mapMutations | prefix:
immm
import { mapMutations } from 'vuex';
- Vuex Committing Mutation (this.$store) | prefix:
storeCommit / cmvm
this.$store.commit('someMutation');
- Vuex Committing Mutation (this.$store, payload) | prefix:
storeCommit / cmpvm
this.$store.commit('someMutation', payload);
- Vuex Committing Mutation | prefix:
storeCommit / cm
store.commit('someMutation');
- Vuex Committing Mutation (payload) | prefix:
storeCommit / cmp
store.commit('someMutation', payload);
- Vuex Committing Mutation (Object-Style) | prefix:
storeCommit / cmo
store.commit({
type: 'someMutation',
payload,
});
- Vuex mapMutations | prefix:
mm
...mapMutations(['some/nested/module/someMutation', 'someMutation']),
- Vuex mapMutations (namespace) | prefix:
mmn
...mapMutations('some/nested/module', ['someMutation', 'someOtherMutation']),
- Vuex mapMutations (different name) | prefix:
mmd
...mapMutations({
handler: 'someMutation',
}),
Actions
- Vuex Create Actions | prefix:
ca
export default {
async createResource(context, payload) {
},
async removeResource(context, payload) {
},
async updateResource(context, payload) {
},
async fetchResource(context, payload) {
},
async fetchAllResource(context, payload) {
},
}
- Vuex Action property | prefix:
ap
handler(context, payload) {
},
- Vuex async Action property | prefix:
asap
async handler(context, payload) {
},
- Vuex import mapActions | prefix:
imma
import { mapActions } from 'vuex';
- Vuex Dispatching Action (this.$store) | prefix:
storeDispatch / davm
this.$store.dispatch('someAction');
- Vuex Dispatching Action (this.$store, payload) | prefix:
storeDispatch / dapvm
this.$store.dispatch('someAction', payload);
- Vuex Dispatching Action | prefix:
storeDispatch / da
store.dispatch('someAction');
- Vuex Dispatching Action (payload) | prefix:
storeDispatch / dap
store.dispatch('someAction', payload);
- Vuex Dispatching Action (Object-Style) | prefix:
storeDispatch / dao
store.dispatch({
type: 'someAction',
payload,
});
- Vuex mapActions | prefix:
ma
...mapActions(['some/nested/module/someAction', 'someAction']),
- Vuex mapActions (namespace) | prefix:
man
...mapActions('some/nested/module', ['someAction', 'someOtherAction']),
- Vuex mapActions (different name) | prefix:
mad
...mapActions({
handler: 'someAction',
}),
Modules
- Vuex Create Modules | prefix:
cm
import getters from './getters';
import actions from './actions';
import mutations from './mutations';
const state = () => ({
property: 'value',
});
export default {
namespaced: true,
state,
getters,
actions,
mutations,
};
Plugin
- Vuex Create a Plugin | prefix:
cp
const featurePlugin = (store) => {
store.subscribe((mutation, state) => {
});
};
Component Binding Helpers
- Vuex createNamespacedHelpers | prefix:
cnh / helper
import { createNamespacedHelpers } from 'vuex';
const { mapState, mapActions } = createNamespacedHelpers('some/nested/module');
Composition API Accessing
- Vuex Composition API setup() Accessing State | prefix:
sas
const property = computed(() => store.state.property);
- Vuex Composition API setup() Accessing Getters | prefix:
sag
const property = computed(() => store.getters.property);
- Vuex Composition API setup() Accessing Mutations | prefix:
sam
const mutation = () => store.commit('mutation');
- Vuex Composition API setup() Accessing Actions | prefix:
saa
const handler = () => store.dispatch('handler');
Store Instance Methods
- Vuex store subscribe | prefix:
storeSubscribe
const unsubscribe = store.subscribe((mutation, state) => {
});
- Vuex store subscribeAction | prefix:
storeSubscribeAction
const unsubscribe = store.subscribeAction((action, state) => {
});
- Vuex store subscribeAction (Object-Style) | prefix:
storeSubscribeAction
const unsubscribe = store.subscribeAction({
before: (action, state) => {
},
after: (action, state) => {
},
error: (action, state, error) => {
}
});
- Vuex store replaceState | prefix:
storeReplaceState
store.replaceState(otherState);
- Vuex store watch | prefix:
storeWatch
const unwatch = store.watch(
(state) => state.property,
(value) => {
;
},
{
immediate: true,
deep: true,
}
);
- Vuex store registerModule | prefix:
storeRegisterModule
store.registerModule('moduleName', {
state: () => ({}),
mutations: {},
actions: {},
getters: {},
});
- Vuex store unregisterModule | prefix:
storeUnregisterModule
store.unregisterModule('moduleName')
- Vuex store hasModule | prefix:
storeHasModule
store.hasModule('moduleName')
- Vuex store hotUpdate | prefix:
storeHotUpdate
store.hotUpdate({
})
--EOL--
License 📃
MIT License
Donate
