galaxy/client/docs/composables.md

Composables

Composables are way of splitting up your code into distinct, reusable chunks. They can replace providers, mixins and more. Any code you can put into a component, can also be written as a composable. Using them effectively can make your code more reusable, decoupled, and easier to follow.

More about Composables:

• Composables Overview
• Composition API
• <script setup>

Using Composables in the Composition API

Example: accessing the current user from the store

<script setup>
import { useCurrentUser } from "@/composables/user";

const { currentUser } = useCurrentUser();
</script>

You can now access the current user with currentUser.value.

Using Composables in the Options API

Composables are not limited to the composition api. This is the same example from above, using the options api.

<script>
import { useCurrentUser } from "@/composables/user";

export default {
    setup() {
        const { currentUser } = useCurrentUser();
        return { currentUser };
    },
};
</script>

You can now access the current user with this.currentUser from anywhere within the component.

Testing Components with Composable Stores

When writing a test which includes a component that has a composable store (like useCurrentUser), there are two ways to test it.

Mocking the store

You can provide the store in the mount function as follows:

const wrapper = shallowMount(TestedComponent,
    localVue,
    provide: { store },
});

store must be a Vuex store. The mockModule helper can help creating a store for the required modules:

const store = new Vuex.Store({
    modules: {
        user: mockModule(userStore),
    },
});

Mocking the composable

The second option is to mock the composable:

import { vi } from "vitest";
import { useCurrentUser } from "@/composables/user";

vi.mock("composables/user");
useCurrentUser.mockReturnValue({
    currentUser: {},
});

While simpler in this example, you may need to manually mock more return values and composables than the other method, depending on the composables the component is using.

Using Composables for more than Stores

Composables can be of great use to extract any reactive code from your components. For an example of this, take a look at useFilterObjectArray.

Usage:

<script setup>
import { useFilterObjectArray } from "@/composables/filter/filter";

const filteredArray = useFilterObjectArray(someReactiveArray, searchValue, ["name", "description"]);
</script>

It's a simple filtering function, but fully reactive. Whenever any of the inputs changes, the return value is re-computed, without having to call the function again.