From b399380eefb0902c6186d70072cca00c883ecf4b Mon Sep 17 00:00:00 2001
From: quaqng <nquang17@gmail.com>
Date: Tue, 24 Jan 2023 20:26:23 +0700
Subject: [PATCH] feature replace vuex with pinia

---
 package.json                  |  4 ++--
 src/components/AppHeader.vue  |  6 +++++-
 src/components/AppSidebar.vue | 19 +++++++------------
 src/main.js                   |  5 +++--
 src/store/index.js            | 21 ---------------------
 src/stores/sidebar.js         | 29 +++++++++++++++++++++++++++++
 6 files changed, 46 insertions(+), 38 deletions(-)
 delete mode 100644 src/store/index.js
 create mode 100644 src/stores/sidebar.js

diff --git a/package.json b/package.json
index 2251e0b0..86da23c6 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index e02b6f14..b243b125 100644
--- a/src/components/AppHeader.vue
+++ b/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,6 +48,7 @@
 import AppBreadcrumb from './AppBreadcrumb'
 import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
 import { logo } from '@/assets/brand/logo'
+import useSidebarStore from '@/stores/sidebar'
 export default {
   name: 'AppHeader',
   components: {
@@ -55,8 +56,11 @@ export default {
     AppHeaderDropdownAccnt,
   },
   setup() {
+    const sidebarStore = useSidebarStore()
+
     return {
       logo,
+      sidebarStore,
     }
   },
 }
diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index 2cb1703a..408eddc1 100644
--- a/src/components/AppSidebar.vue
+++ b/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),
     }
   },
 }
diff --git a/src/main.js b/src/main.js
index 5afc2d2d..4b430e86 100644
--- a/src/main.js
+++ b/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)
diff --git a/src/store/index.js b/src/store/index.js
deleted file mode 100644
index 57dcaeda..00000000
--- a/src/store/index.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { createStore } from 'vuex'
-
-export default createStore({
-  state: {
-    sidebarVisible: '',
-    sidebarUnfoldable: false,
-  },
-  mutations: {
-    toggleSidebar(state) {
-      state.sidebarVisible = !state.sidebarVisible
-    },
-    toggleUnfoldable(state) {
-      state.sidebarUnfoldable = !state.sidebarUnfoldable
-    },
-    updateSidebarVisible(state, payload) {
-      state.sidebarVisible = payload.value
-    },
-  },
-  actions: {},
-  modules: {},
-})
diff --git a/src/stores/sidebar.js b/src/stores/sidebar.js
new file mode 100644
index 00000000..14a5478e
--- /dev/null
+++ b/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