On gists

Composition examples & ways

Vue.js

examples.js Raw #

<template>
    <div>
        <p>Spaces Left: {{ spacesLeft }} out of {{ capacity }}</p>
        <h2>Attending</h2>
        <ul>
            <li v-for="(name, index) in attending" :key="index">
                {{ name }}
            </li>
        </ul>
        <button @click="increaseCapacity()">Increase Capacity</button>
    </div>
</template>
<script>
import { ref, computed } from 'vue';
export default {
    setup() {
        const capacity = ref(4);
        const attending = ref(['Tim', 'Bob', 'Joe']);
        const spacesLeft = computed(() => {
            return capacity.value - attending.value.length;
        });
        function increaseCapacity() {
            capacity.value++;
        }
        return { capacity, attending, spacesLeft, increaseCapacity };
    },
};
</script>


// can be rewritten as:
import {
    reactive,
    computed,
    toRefs
} from "vue";

export default {
    setup() {
        const event = reactive({
            capacity: 4,
            attending: ["Tim", "Bob", "Joe"],
            spacesLeft: computed(() => {
                return event.capacity - event.attending.length;
            })
        });

        function increaseCapacity() {
            event.capacity++;
        }
        return {
            ...toRefs(event),
            increaseCapacity
        };
    }
};


// TO ORGANIZE BY FEATURE
<template>…</template>
<script>
export default {
    setup() {
        const productSearch = useSearch();
        const resultSorting = useSorting({});
        return { productSearch, resultSorting };
    },
};

function useSearch(getResults) {}
function useSorting({ input, options }) {}
</script>


// TO EXTRACT SHARED CODE:
<template>…</template>
<script>
import useSearch from '@use/search';
import useSorting from '@use/sorting';
export default {
    setup() {
        const productSearch = useSearch();
        const resultSorting = useSorting({});
        return { productSearch, resultSorting };
    },
};
</script>

// use/search.js 
export default function useSearch (getResults) { }

// use/sorting.js 
export default function useSorting ({ input, options }) { }