feature replace vuex with pinia

package.json

@@ -27,9 +27,9 @@
     "@coreui/vue": "^4.5.0",
     "@coreui/vue-chartjs": "2.0.1",
     "core-js": "^3.26.1",
+    "pinia": "^2.0.29",
     "vue": "^3.2.45",
-    "vue-router": "^4.1.6",
-    "vuex": "^4.1.0"
+    "vue-router": "^4.1.6"
   },
   "devDependencies": {
     "@babel/core": "^7.20.2",

src/components/AppHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <CHeader position="sticky" class="mb-4">
     <CContainer fluid>
-      <CHeaderToggler class="ps-1" @click="$store.commit('toggleSidebar')">
+      <CHeaderToggler class="ps-1" @click="sidebarStore.toggleSidebar">
         <CIcon icon="cil-menu" size="lg" />
       </CHeaderToggler>
       <CHeaderBrand class="mx-auto d-lg-none" to="/">
@@ -48,15 +48,19 @@
 import AppBreadcrumb from './AppBreadcrumb'
 import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
 import { logo } from '@/assets/brand/logo'
+import useSidebarStore from '@/stores/sidebar'
 export default {
   name: 'AppHeader',
   components: {
     AppBreadcrumb,
     AppHeaderDropdownAccnt,
   },
   setup() {
+    const sidebarStore = useSidebarStore()
+
     return {
       logo,
+      sidebarStore,
     }
   },
 }

src/components/AppSidebar.vue

@@ -3,13 +3,7 @@
     position="fixed"
     :unfoldable="sidebarUnfoldable"
     :visible="sidebarVisible"
-    @visible-change="
-      (event) =>
-        $store.commit({
-          type: 'updateSidebarVisible',
-          value: event,
-        })
-    "
+    @visible-change="(event) => sidebarStore.updateSidebarVisible(event)"
   >
     <CSidebarBrand>
       <CIcon
@@ -26,29 +20,30 @@
     <AppSidebarNav />
     <CSidebarToggler
       class="d-none d-lg-flex"
-      @click="$store.commit('toggleUnfoldable')"
+      @click="sidebarStore.toggleUnfoldable"
     />
   </CSidebar>
 </template>
 
 <script>
 import { computed } from 'vue'
-import { useStore } from 'vuex'
 import { AppSidebarNav } from './AppSidebarNav'
 import { logoNegative } from '@/assets/brand/logo-negative'
 import { sygnet } from '@/assets/brand/sygnet'
+import useSidebarStore from '@/stores/sidebar'
 export default {
   name: 'AppSidebar',
   components: {
     AppSidebarNav,
   },
   setup() {
-    const store = useStore()
+    const sidebarStore = useSidebarStore()
     return {
       logoNegative,
       sygnet,
-      sidebarUnfoldable: computed(() => store.state.sidebarUnfoldable),
-      sidebarVisible: computed(() => store.state.sidebarVisible),
+      sidebarStore,
+      sidebarUnfoldable: computed(() => sidebarStore.sidebarUnfoldable),
+      sidebarVisible: computed(() => sidebarStore.sidebarVisible),
     }
   },
 }

src/main.js

@@ -1,15 +1,16 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
-import store from './store'
 
 import CoreuiVue from '@coreui/vue'
 import CIcon from '@coreui/icons-vue'
 import { iconsSet as icons } from '@/assets/icons'
 import DocsExample from '@/components/DocsExample'
 
+const pinia = createPinia()
 const app = createApp(App)
-app.use(store)
+app.use(pinia)
 app.use(router)
 app.use(CoreuiVue)
 app.provide('icons', icons)

src/stores/sidebar.js

@@ -0,0 +1,29 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+const useSidebarStore = defineStore('SidebarStore', () => {
+  const sidebarVisible = ref('')
+  const sidebarUnfoldable = ref(false)
+
+  function toggleSidebar() {
+    sidebarVisible.value = !sidebarVisible.value
+  }
+
+  function toggleUnfoldable() {
+    sidebarUnfoldable.value = !sidebarUnfoldable.value
+  }
+
+  function updateSidebarVisible(value) {
+    sidebarVisible.value = value
+  }
+
+  return {
+    sidebarVisible,
+    sidebarUnfoldable,
+    toggleSidebar,
+    toggleUnfoldable,
+    updateSidebarVisible,
+  }
+})
+
+export default useSidebarStore