sistemare class type boolean....

src/layouts/drawer/drawer.vue

@@ -1,12 +1,12 @@
 <template>
     <div>
-        <div id="profile" v-if="getUsername">
+        <div id="profile" v-if="Username">
             <img :src="photo" style='height: 80px' class="inline-block">
             <img src="../img/avatar-1.svg" id="avatar" class="inline-block">
             <div id="user-name">
-                <span class="text-white"> {{ getUsername }} </span>
+                <span class="text-white"> {{ Username }} </span>
                 <hr>
-                <span class="text-white" v-if="getVerificato"> {{$t('reg.verificato')}} </span>
+                <span class="text-white" v-if="Verificato"> {{$t('reg.verificato')}} </span>
                 <span class="text-white" v-else> {{$t('reg.non_verificato')}} </span>
                 <span class="text-white"> {{ getEmail }} </span>
             </div>
@@ -17,7 +17,7 @@
             </div>
         </div>
 
-        <menu-one v-if="getMenuCollapse" :links="links"></menu-one>
+        <menu-one v-if="MenuCollapse" :links="links"></menu-one>
         <menu-two v-else :links="links"></menu-two>
 
         <div class="fixed-bottom text-center light text-italic">
@@ -26,76 +26,70 @@
 
     </div>
 </template>
-<script type="text/javascript">
+
+<script type="ts">
   import menuOne from './menuOne.vue'
   import menuTwo from './menuTwo.vue'
 
   import * as types from '../../store/mutation-types'
 
-  import {mapGetters, mapActions} from 'vuex'
+  import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
+  import { GlobModule } from '../../store/modules/glob'
+  import { UserModule } from '../../store/modules/user';
 
-  export default {
-    data() {
-      return {
-        photo: '',
-        user: null,
-        links: {
-          Dashboard: {
-            routes: [
-              {route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'Dashboard One'},
-              {route: '/signup', faIcon: 'fa fa-signup', materialIcon: 'login', name: 'SignUp'},
-              {route: '/signin', faIcon: 'fa fa-login', materialIcon: 'login', name: 'Login'},
-            ],
-            show: true
-          },
-          Forms: {
-            routes: [
-              {route: '/prec', faIcon: 'fa fa-search', materialIcon: 'search', name: 'Prec'},
-              {route: '/simpleform', faIcon: 'fa fa-search', materialIcon: 'search', name: 'Simpleform'},
-              { route: '/embeeded', faIcon: 'fa fa-check', materialIcon: 'check', name: 'Embeeded validations' },
-              //{ route: '/advanced-form-one', faIcon: 'fa fa-hdd-o', materialIcon: 'filter_1', name: 'Adv. Form One' }
-            ],
-            show: false
-          },
-          Pages: {
-            routes: [
-              {route: '/login', faIcon: 'fa fa-unlock-alt', materialIcon: 'lock_open', name: 'Login'},
-              //{ route: '/pricing', faIcon: 'fa fa-money', materialIcon: 'attach_money', name: 'Pricing' },
-              //{ route: '/drag-and-drop', faIcon: 'fa fa-arrows', materialIcon: 'move_to_inbox', name: 'Drag and Drop' },
-              //{ route: '/server-side-data-table', faIcon: 'fa fa-list-alt', materialIcon: 'list_compact', name: 'Server Side Data Table' }
-            ],
-            show: false
-          }
-        }
-      }
-    },
-    created() {
-      var vm = this
-      /*firebase.auth().onAuthStateChanged(function (user) {
-        if (user) {
-          vm.user = user
-          vm.name = vm.user.displayName
-          vm.email = vm.user.email
-          vm.photo = vm.user.photoURL
-          vm.userId = vm.user.uid
-        }
-      })*/
-    },
-    methods:{
-      ...mapActions("user", ["logout"]),
-      logoutHandler() {
-        this.logout({router: this.$router});
-        this.$q.notify(this.$t('logout.uscito'));
-      }
-    },
-    computed: {
-      ...mapGetters("glob", ['getLayoutNeeded', 'getMenuCollapse']),
-      ...mapGetters("user", ['getUsername', 'getVerificato', 'getEmail']),
-    },
+  @Component({
     components: {
       menuOne,
       menuTwo
     }
+  })
+  export default class Drawer extends Vue {
+    photo = ''
+    user = null
+    links = {
+      Dashboard: {
+        routes: [
+          {route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'Dashboard One'},
+          {route: '/signup', faIcon: 'fa fa-signup', materialIcon: 'login', name: 'SignUp'},
+          {route: '/signin', faIcon: 'fa fa-login', materialIcon: 'login', name: 'Login'},
+          ],
+        show: true
+      },
+      Forms: {
+        routes: [
+          {route: '/prec', faIcon: 'fa fa-search', materialIcon: 'search', name: 'Prec'},
+          {route: '/simpleform', faIcon: 'fa fa-search', materialIcon: 'search', name: 'Simpleform'},
+          {route: '/embeeded', faIcon: 'fa fa-check', materialIcon: 'check', name: 'Embeeded validations'},
+          //{ route: '/advanced-form-one', faIcon: 'fa fa-hdd-o', materialIcon: 'filter_1', name: 'Adv. Form One' }
+          ],
+        show: false
+      },
+      Pages: {
+        routes: [
+          {route: '/login', faIcon: 'fa fa-unlock-alt', materialIcon: 'lock_open', name: 'Login'},
+          //{ route: '/pricing', faIcon: 'fa fa-money', materialIcon: 'attach_money', name: 'Pricing' },
+          //{ route: '/drag-and-drop', faIcon: 'fa fa-arrows', materialIcon: 'move_to_inbox', name: 'Drag and Drop' },
+          //{ route: '/server-side-data-table', faIcon: 'fa fa-list-alt', materialIcon: 'list_compact', name: 'Server Side Data Table' }
+          ],
+        show: false
+      }
+    }
+
+    get MenuCollapse () {
+      return GlobModule.menuCollapse
+    }
+    get Username () {
+      return UserModule.username
+    }
+
+    get Verificato () {
+      return UserModule.verifiedEmail
+    }
+
+    logoutHandler() {
+      this.logout({ router: this.$router })
+      this.$q.notify(this.$t('logout.uscito'))
+    }
   }
 </script>
 <style scoped>