refactor: migrate from Vuex to Pinia

Author: mrholek

package.json

@@ -27,10 +27,10 @@
     "@coreui/vue-chartjs": "^3.0.0",
     "@popperjs/core": "^2.11.8",
     "chart.js": "^4.4.2",
+    "pinia": "^2.1.7",
     "simplebar-vue": "^2.3.3",
     "vue": "^3.4.21",
-    "vue-router": "^4.3.0",
-    "vuex": "^4.1.0"
+    "vue-router": "^4.3.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

src/App.vue

@@ -1,10 +1,13 @@
 <script setup>
 import { onBeforeMount } from 'vue'
-import { useStore } from 'vuex'
 import { useColorModes } from '@coreui/vue'
 
-const { isColorModeSet, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
-const store = useStore()
+import { useThemeStore } from '@/stores/theme.js'
+
+const { isColorModeSet, setColorMode } = useColorModes(
+  'coreui-free-vue-admin-template-theme',
+)
+const currentTheme = useThemeStore()
 
 onBeforeMount(() => {
   const urlParams = new URLSearchParams(window.location.href.split('?')[1])
@@ -23,7 +26,7 @@ onBeforeMount(() => {
     return
   }
 
-  setColorMode(store.state.theme)
+  setColorMode(currentTheme.theme)
 })
 </script>
 

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,31 +1,22 @@
-
 <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>
   <CSidebar
     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>

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 app = createApp(App)
-app.use(store)
+app.use(createPinia())
 app.use(router)
 app.use(CoreuiVue)
 app.provide('icons', icons)

src/store/index.js

@@ -0,0 +1,17 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useSidebarStore = defineStore('sidebar', () => {
+  const visible = ref(undefined)
+  const unfoldable = ref(false)
+
+  const toggleVisible = (value) => {
+    visible.value = value !== undefined ? value : !visible.value
+  }
+
+  const toggleUnfoldable = () => {
+    unfoldable.value = !unfoldable.value
+  }
+
+  return { visible, unfoldable, toggleVisible, toggleUnfoldable }
+})

src/stores/sidebar.js

@@ -0,0 +1,12 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useThemeStore = defineStore('theme', () => {
+  const theme = ref('light')
+
+  const toggleTheme = (_theme) => {
+    theme.value = _theme
+  }
+
+  return { theme, toggleTheme }
+})