config function for usage in vue/vuex 3 (like in laravel)

ExampleCompontent.vue

<template>
    <div>
        <h1>{{ pageTitle }}</h1>
    </div>
</template>

<script>
import useConfig from "../composition/useConfig"

// vue 2
export default {
    name: "ExampleComponent",
    data() {
        const { config } = useConfig()
        const pageTitle = config("config.page.title", "Default Page Title")
        return {
            pageTitle,
        }
    },
}

// vue 3
export default {
    name: "ExampleComponent",
    setup() {
        const config = useConfig()
        const pageTitle = config("config.page.title", "Default Page Title")

        return {
            pageTitle,
        }
    },
}
</script>

<style scoped>

</style>

store.js

import { createStore } from "vuex"

const store = createStore({
    state() {
        return {
            configuration: {},
        }
    },
    mutations: {
        setConfiguration(state, payload) {
            state.configuration = payload
        },
    },
})

export default store

useConfig.js

import { useStore } from "vuex"

/**
 *
 * @returns {{config: (function(String, *=): *)}}
 */
export default function useConfig() {
    const store = useStore()
    const configArray = store.state.configuration

    /**
     *
     * @param {String} key
     * @param {*} defaultValue
     * @returns {*}
     */
    function config(key, defaultValue = null) {
        if (!key) {
            return defaultValue
        }
        const keyPaths = String(key).split(".")

        let { result } = { ...{ result: defaultValue } }

        let next = configArray

        while (keyPaths.length) {
            const current = keyPaths.shift()
            if (
                typeof next !== "object" ||
                next[current] === undefined
            ) {
                return defaultValue
            } else {
                const { nextResult } = { ...{ nextResult: next[current] } }
                result = nextResult
                next = nextResult
            }
        }

        return result
    }

    return {
        config,
    }
}