[Vuejs]-Vue: how to properly connect Pinia store, Router and UI toolbar for sharing a global state variable

here is how I would do it :

// router/index.js
import { createRouter, createWebHistory } from "vue-router";

const routes = [
{
    path: "/",
    name: "Home",
    component: () => import("../views/Home.vue"),
    props: (route) => ({ config: route.query.config || "" }), // Capture 'config' from URL
},
// Other routes
];

const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});

export default router;

then add pinia config like so:
// stores/configuration.ts
import { defineStore } from "pinia";

export const useConfigurationStore = defineStore("configuration", {
state: () => ({
    currentConfig: "",
}),
actions: {
    setCurrentConfig(configName) {
    this.currentConfig = configName;
    },
},
});

then , Main Vue App: In your main Vue app, you can use a computed property to synchronize the store’s state with the URL parameter. Additionally, use a watch to update the URL parameter when the store’s currentConfig changes.

// main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { useConfigurationStore } from "./stores/configuration";

const app = createApp(App);
app.use(router);

const store = useConfigurationStore();

app.config.globalProperties.$store = store;

app.mount("#app");

// Synchronize store state with URL parameter
const configFromRoute = router.currentRoute.value.query.config;
if (configFromRoute) {
store.setCurrentConfig(configFromRoute);
}

// Watch for changes in the store's currentConfig and update the URL parameter
store.$watch(
(state) => state.currentConfig,
(newConfig) => {
    router.push({ query: { config: newConfig } });
}
);

then the fun part inside the dropdown component:

<!-- Dropdown.vue -->
<template>
<select v-model="currentConfig">
    <option v-for="config in configs" :key="config.name" :value="config.name">
    {{ config.name }}
    </option>
</select>
</template>

<script>
import { computed } from "vue";
import { useConfigurationStore } from "@/stores/configuration";

export default {
name: "Dropdown",
setup() {
    const store = useConfigurationStore();
    const currentConfig = computed({
    get: () => store.currentConfig,
    set: (value) => store.setCurrentConfig(value),
    });

    const configs = [
    // Your list of configuration options
    ];

    return {
    currentConfig,
    configs,
    };
},
};
</script>