fix final

resources/js/app.js

@@ -8,18 +8,17 @@ import VueApexCharts from 'vue-apexcharts'
 import Alpine from 'alpinejs'
 import Vue from 'vue'
 import Vuex from 'vuex'
+import createPersistedState from "vuex-persistedstate";
 import VueCompositionAPI from '@vue/composition-api'
 import VueAxios from 'vue-axios'
 import axios from 'axios'
 import JwPagination from 'jw-vue-pagination'
-import { createPopper } from "@popperjs/core"
 import Toast from "vue-toastification"
 import "vue-toastification/dist/index.css"
 import router from './routes'
 import Vuelidate from 'vuelidate'
 import datetime from 'vuejs-datetimepicker';
 import VueContentPlaceholders from 'vue-content-placeholders'
-import VueGlobalVar from 'vue-global-var'
 
 require('./bootstrap');
 
@@ -49,7 +48,6 @@ Vue.use (Alpine)
 Vue.use(VueCompositionAPI)
 Vue.use(VueAxios, axios)
 Vue.component('jw-pagination', JwPagination)
-// Vue.use(createPopper)
 Vue.use(Toast, options)
 Vue.use(datetime)
 Vue.use(VueContentPlaceholders)
@@ -65,38 +63,43 @@ Vue.use(require('vue-pusher'), {
 });
 
 Vue.prototype.$hostname = 'http://localhost:8000'
-// Vue.prototype.$kodcaw = Vue.observable({
-//     kodcaw: '020306' 
-//   });
 
-// const cawanganstore = new Vuex.Store({
-//     kodcaw: 'KB2'
-// })
+let initial = 'KB2';
 
-// let globalData = new Vue({
-//     data: { $kodcaw: '020306' }
-// });
-
-// const store = new Vuex.Store({
-//     state: { $kodcaw: 'KB2' },
-//     mutations: { update$kodcaw: function(state, newKodcaw) { state.$kodcaw = newKodcaw; } }
-//   });
-
-// Vue.mixin({
-//     computed: {
-//         $kodcaw: {
-//         get: function () { return store.state.$kodcaw },
-//         set: function(newKodcaw) { return store.commit('update$kodcaw', newKodcaw); }
-//         }
-//     }
-// })
-
-Vue.use(VueGlobalVar, {
-    globals: {
-      $kodcaw: 'KB2'
+const store = new Vuex.Store({
+    state: { 
+        $kodcaw: 'KB2' 
     },
+    plugins: [createPersistedState()],
+    mutations: { 
+        update$kodcaw: function(state, newKodcaw) {
+             state.$kodcaw = newKodcaw; 
+        },
+        reset (state) {
+            state.$kodcaw = initial;
+        }
+
+    }
   });
-  
+
+Vue.mixin({
+    computed: {
+        $kodcaw: {
+        get: function () { 
+        return store.state.$kodcaw 
+        },
+        }
+    },
+    methods:{
+        setkodcaw: function(newKodcaw) { 
+            // console.log(newKodcaw)
+            return store.commit('update$kodcaw', newKodcaw);
+         },
+        setLogout: function(){
+            return store.commit('reset');
+        }
+    }
+})
 
 
 //Chart
@@ -130,25 +133,14 @@ Vue.component('bilangan-component', require('./components/Chart/BilanganChart.vu
 Vue.component('senaraibajet-component', require('./Bajet/Homebajet.vue').default)
 Vue.component('clock-component', require('./components/util/Clock.vue').default)
 
-
-
-
+Vue.component('logout-component', require('./Logout.vue').default)
 
 
 Vue.component('apexchart', VueApexCharts)
 
 
-// Vue.component('Navbar', require('./components/Navbar.vue').default);
-
-
-/**
- * Next, we will create a fresh Vue application instance and attach it to
- * the page. Then, you may begin adding components to this application
- * or customize the JavaScript scaffolding to fit your unique needs.
- */
-
 const app = new Vue({
     router,
     el: '#app',
-    // store
+    store
 });