DFSnippets - VS Code Uzantısı
Genel Bakış
DFSnippets, VS Code kullanıcıları için özel olarak oluşturulmuş bir snippet (parçaçık) koleksiyonudur. Bu snippet'ler, yazılım geliştirme sürecinizde sık kullandığınız kod kalıplarını hızlı bir şekilde eklemenizi sağlar.
| Prefix |
Body |
|
| vdefault |
, Component ,,,,,, |
|
| vinject |
const ${1:message} = inject(${1:'message'}) |
|
| vprovide |
provide('${1:'provideName'}', ${1:provide}); |
|
| vprops |
const props = defineProps({, ${1:prop1}: {, type: ${2:Boolean},, required: ${3:true},, default: ${4:false},, },,}); |
|
| vprop |
${1:prop1}: {, type: ${2:Boolean},, required: ${3:true},, default: ${4:false},, } |
|
| vemit |
const emit = defineEmits({, ${1:submit}(${2:payload}) {, ${3://Do something}, // return true or false to indicate, },}) |
|
| vemits |
const emit = defineEmits([${1:'onFocus'}, ${1:'submit'}]) |
|
| vref |
const ${1:name} = ref(${2:initialValue}) |
|
| vmethod |
const ${1:methodName} = (${2:params}) => {, ${3:doSomething},}; |
|
| vfunction |
const ${1:methodName} = (${2:params}) => {, ${3:doSomething},}; |
|
| vcomputed |
const ${1:now} = computed(() => {, return ${2:Date.now()},}) |
|
| vwritable-computed |
const ${1:fullName} = computed({, // getter, get() {, return ${2:firstName.value + ' ' + lastName.value}, },, // setter, set(newValue) {, // Note: we are using destructuring assignment syntax here., ${3: [firstName.value, lastName.value] = newValue.split(' ')}, },}) |
|
| vwatch |
watch(, () => ${1:foo},, (newValue, oldValue) => {, ${2:body} , },);, |
|
| impmixin |
import useMixin from 'src/composables/useMixins.js' |
|
| prefix |
body |
description |
| ---------------------------- |
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
------------------------------------------------------------------------------- |
pinia, cp |
import { createPinia } from 'pinia';
const pinia = createPinia();
app.use(pinia); |
Create a pinia instance |
pinia4vue2, cp4vue2 |
import { createPinia, PiniaVuePlugin } from 'pinia';
Vue.use(PiniaVuePlugin);
const pinia = createPinia(); |
Create a pinia instance for Vue 2 |
defineStore, ds |
import { defineStore } from 'pinia';
export const useFileNameStore = defineStore('file-name', () => {
return {
}
}); |
Defining Stores - Composing |
defineStore, dso |
import { defineStore } from 'pinia';
export const useFileNameStore = defineStore('file-name', {
state: () => ({
}),
getters: {
},
actions: {
},
}); |
Defining Stores - Option |
ims |
import { useFeatureStore } from '@/stores/feature';
const featureStore = useFeatureStore();S |
Import Store |
imstr |
import { storeToRefs } from 'pinia';
const { properties } = storeToRefs(store); |
Import storeToRefs() |
imms |
import { mapState } from 'pinia';
...mapState(useFeatureStore, ['state/getter']), |
Import mapState |
imma |
import { mapActions } from 'pinia';
...mapActions(useFeatureStore, ['actions']), |
Import mapActions |
immws |
import { mapWritableState } from 'pinia';
...mapWritableState(useFeatureStore, ['state/getter']), |
Import mapWritableState |
ms |
...mapState(useFeatureStore, ['state/getter']), |
Usage with the Options API - Without setup() - mapState() |
ma |
...mapActions(useFeatureStore, ['actions']), |
Usage with the Options API - Without setup() - mapActions() |
mws |
...mapWritableState(useFeatureStore, ['state/getter']), |
Usage with the Options API - Without setup() - mapWritableState() |
store.$patch, sp |
featureStore.$patch((state) => {
}); |
Mutating the state: store.$patch |
store.$subscribe, ss |
featureStore.$subscribe((mutation, state) => {
}); |
Subscribing to state: store.$subscribe |
store.$onAction, sa |
const unsubscribe = featureStore.$onAction(
({ name, store, args, after, onError }) => {
after((result) => { });
onError((error) => { });
}
); |
Subscribing to actions: store.$onAction |
store2composition , us |
const featureStore = useFeatureStore(); |
Store @ Composition API, useFeatureStore |
store2option, uso |
setup() {
const featureStore = useFeatureStore()
return { featureStore }
}, |
Store @ Options API, useFeatureStore |
| |
