feat: add vuex state managment

package.json

@@ -30,10 +30,11 @@
     "@coreui/coreui": "^3.0.0-beta.4",
     "@coreui/icons": "^1.0.0",
     "@coreui/utils": "^1.2.2",
-    "@coreui/vue": "^3.0.0-beta.10",
+    "@coreui/vue": "../coreui-vue",
     "@coreui/vue-chartjs": "^1.0.3",
     "vue": "^2.6.11",
-    "vue-router": "^3.1.5"
+    "vue-router": "^3.1.5",
+    "vuex": "^3.1.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.1.2",

src/containers/TheHeader.vue

@@ -3,12 +3,12 @@
     <CToggler
       in-header
       class="ml-3 d-lg-none"
-      v-c-emit-root-event:toggle-sidebar-mobile
+      @click="$store.commit('toggleSidebarMobile')"
     />
     <CToggler
       in-header
       class="ml-3 d-md-down-none"
-      v-c-emit-root-event:toggle-sidebar
+      @click="$store.commit('toggleSidebarDesktop')"
     />
     <CHeaderBrand class="mx-auto d-lg-none" to="/">
       <CIcon name="logo" height="48" alt="Logo"/>

src/containers/TheSidebar.vue

@@ -2,7 +2,8 @@
   <CSidebar 
     fixed 
     :minimize="minimize"
-    :show.sync="show"
+    :show="show"
+    @update:show="(value) => $store.commit('set', ['sidebarShow', value])"
   >
     <CSidebarBrand class="d-md-down-none" to="/">
       <CIcon 
@@ -14,10 +15,10 @@
       />
     </CSidebarBrand>
 
-    <CRenderFunction flat :content-to-render="nav"/>
+    <CRenderFunction flat :content-to-render="$options.nav"/>
     <CSidebarMinimizer
       class="d-md-down-none"
-      @click.native="minimize = !minimize"
+      @click.native="$store.commit('set', ['sidebarMinimize', !minimize])"
     />
   </CSidebar>
 </template>
@@ -27,22 +28,14 @@ import nav from './_nav'
 
 export default {
   name: 'TheSidebar',
-  data () {
-    return {
-      minimize: false,
-      nav,
-      show: 'responsive'
+  nav,
+  computed: {
+    show () {
+      return this.$store.state.sidebarShow 
+    },
+    minimize () {
+      return this.$store.state.sidebarMinimize 
     }
-  },
-  mounted () {
-    this.$root.$on('toggle-sidebar', () => {
-      const sidebarOpened = this.show === true || this.show === 'responsive'
-      this.show = sidebarOpened ? false : 'responsive'
-    })
-    this.$root.$on('toggle-sidebar-mobile', () => {
-      const sidebarClosed = this.show === 'responsive' || this.show === false
-      this.show = sidebarClosed ? true : 'responsive'
-    })
   }
 }
 </script>

src/main.js

@@ -4,6 +4,7 @@ import App from './App'
 import router from './router'
 import CoreuiVue from '@coreui/vue/src'
 import { iconsSet as icons } from './assets/icons/icons.js'
+import store from './store'
 
 Vue.config.performance = true
 Vue.use(CoreuiVue)
@@ -11,6 +12,7 @@ Vue.use(CoreuiVue)
 new Vue({
   el: '#app',
   router,
+  store,
   icons,
   template: '<App/>',
   components: {

src/store.js

@@ -3,17 +3,18 @@ import Vuex from 'vuex'
 Vue.use(Vuex)
 
 const state = {
-  showSidebar: 'responsive'
+  sidebarShow: 'responsive',
+  sidebarMinimize: false
 }
 
 const mutations = {
   toggleSidebarDesktop (state) {
-    const sidebarOpened = [true, 'responsive'].includes(state.showSidebar)
-    state.showSidebar = sidebarOpened ? false : 'responsive'
+    const sidebarOpened = [true, 'responsive'].includes(state.sidebarShow)
+    state.sidebarShow = sidebarOpened ? false : 'responsive'
   },
   toggleSidebarMobile (state) {
-    const sidebarClosed = [false, 'responsive'].includes(state.showSidebar)
-    state.showSidebar = sidebarClosed ? true : 'responsive'
+    const sidebarClosed = [false, 'responsive'].includes(state.sidebarShow)
+    state.sidebarShow = sidebarClosed ? true : 'responsive'
   },
   set (state, [variable, value]) {
     state[variable] = value