refactor: migrate from Vuex to Pinia

src/components/AppHeader.vue

@@ -1,11 +1,14 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 import { useColorModes } from '@coreui/vue'
-import AppBreadcrumb from './AppBreadcrumb'
-import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
+
+import AppBreadcrumb from '@/components/AppBreadcrumb.vue'
+import AppHeaderDropdownAccnt from '@/components/AppHeaderDropdownAccnt.vue'
+import { useSidebarStore } from '@/stores/sidebar.js'
 
 const headerClassNames = ref('mb-4 p-0')
 const { colorMode, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
+const sidebar = useSidebarStore()
 
 onMounted(() => {
   document.addEventListener('scroll', () => {
@@ -21,7 +24,7 @@ onMounted(() => {
 <template>
   <CHeader position="sticky" :class="headerClassNames">
     <CContainer class="border-bottom px-4" fluid>
-      <CHeaderToggler @click="$store.commit('toggleSidebar')" style="margin-inline-start: -14px">
+      <CHeaderToggler @click="sidebar.toggleVisible()" style="margin-inline-start: -14px">
         <CIcon icon="cil-menu" size="lg" />
       </CHeaderToggler>
       <CHeaderNav class="d-none d-md-flex">

src/components/AppSidebar.vue

@@ -1,15 +1,12 @@
-
 <script setup>
-import { computed } from 'vue'
 import { RouterLink } from 'vue-router'
-import { useStore } from 'vuex'
-import { AppSidebarNav } from './AppSidebarNav'
+
 import { logo } from '@/assets/brand/logo'
 import { sygnet } from '@/assets/brand/sygnet'
+import { AppSidebarNav } from '@/components/AppSidebarNav.js'
+import { useSidebarStore } from '@/stores/sidebar.js'
 
-const store = useStore()
-const sidebarUnfoldable =  computed(() => store.state.sidebarUnfoldable)
-const sidebarVisible = computed(() => store.state.sidebarVisible)
+const sidebar = useSidebarStore()
 </script>
 
 <template>
@@ -17,15 +14,9 @@ const sidebarVisible = computed(() => store.state.sidebarVisible)
     class="border-end"
     colorScheme="dark"
     position="fixed"
-    :unfoldable="sidebarUnfoldable"
-    :visible="sidebarVisible"
-    @visible-change="
-      (event) =>
-        $store.commit({
-          type: 'updateSidebarVisible',
-          value: event,
-        })
-    "
+    :unfoldable="sidebar.unfoldable"
+    :visible="sidebar.visible"
+    @visible-change="(value) => sidebar.toggleVisible(value)"
   >
     <CSidebarHeader class="border-bottom">
       <RouterLink custom to="/" v-slot="{ href, navigate }">
@@ -34,11 +25,11 @@ const sidebarVisible = computed(() => store.state.sidebarVisible)
           <CIcon custom-class-name="sidebar-brand-narrow" :icon="sygnet" :height="32" />
         </CSidebarBrand>
       </RouterLink>
-      <CCloseButton class="d-lg-none" dark @click="$store.commit('toggleSidebar')" />
+      <CCloseButton class="d-lg-none" dark @click="sidebar.toggleVisible()" />
     </CSidebarHeader>
     <AppSidebarNav />
     <CSidebarFooter class="border-top d-none d-lg-flex">
-      <CSidebarToggler @click="$store.commit('toggleUnfoldable')" />
+      <CSidebarToggler @click="sidebar.toggleUnfoldable()" />
     </CSidebarFooter>
   </CSidebar>
 </template>