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

xianghongai / vscode-vuex-snippets

Vuex Snippet (Visual Studio Code)

Snippets

Store

State

Getters

Mutations

Actions

Modules

Plugin

Component Binding Helpers

Composition API Accessing

Store Instance Methods

License 📃

About

Languages