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 ,,,<script setup>,import { ref, watch, computed } from 'vue';,import { useI18n } from 'vue-i18n',//#region Composables,const { t } = useI18n(),//#endregion,,//#region Injects,//#endregion,,//#region Props,//#endregion,,//#region Emits,//#endregion,,//#region Variables,//#endregion,,//#region Methods,//#endregion,,//#region Computed Properties,//#endregion,,//#region Watchers,//#endregion,,//#region Lifecycle Hooks,//#endregion,,//#region Created,//#endregion,,//#region Providers,//#endregion,,</script>,,<style lang="scss" scoped></style>, |
| 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 |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
pinia, cp
|
import { createPinia } from 'pinia';const pinia = createPinia();app.use(pinia);
|
pinia4vue2, cp4vue2
|
import { createPinia, PiniaVuePlugin } from 'pinia';Vue.use(PiniaVuePlugin);const pinia = createPinia();
|
defineStore, ds
|
import { defineStore } from 'pinia';export const useFileNameStore = defineStore('file-name', () => { return { }});
|
defineStore, dso
|
import { defineStore } from 'pinia';export const useFileNameStore = defineStore('file-name', { state: () => ({ }), getters: { }, actions: { },});
|
ims |
import { useFeatureStore } from '@/stores/feature';const featureStore = useFeatureStore();S |
imstr |
import { storeToRefs } from 'pinia';const { properties } = storeToRefs(store);
|
imms |
import { mapState } from 'pinia';...mapState(useFeatureStore, ['state/getter']),
|
imma |
import { mapActions } from 'pinia';...mapActions(useFeatureStore, ['actions']),
|
immws |
import { mapWritableState } from 'pinia';...mapWritableState(useFeatureStore, ['state/getter']),
|
ms |
...mapState(useFeatureStore, ['state/getter']), |
ma |
...mapActions(useFeatureStore, ['actions']), |
mws |
...mapWritableState(useFeatureStore, ['state/getter']), |
store.$patch, sp
|
featureStore.$patch((state) => { });
|
store.$subscribe, ss
|
featureStore.$subscribe((mutation, state) => { });
|
store.$onAction, sa
|
const unsubscribe = featureStore.$onAction( ({ name, store, args, after, onError }) => { after((result) => { }); onError((error) => { }); });
|
store2composition , us
|
const featureStore = useFeatureStore(); |
store2option, uso
|
setup() { const featureStore = useFeatureStore() return { featureStore }},
|