Internal: Use mapGetter to get store properties

assets/vue/App.vue

@@ -36,6 +36,8 @@
 </style>
 <script>
 
+import { mapGetters } from 'vuex';
+
 import NotificationMixin from './mixins/NotificationMixin';
 import Breadcrumb from './components/Breadcrumb';
 import Snackbar from './components/Snackbar';
@@ -71,12 +73,10 @@ export default {
     legacy_content: null,
   }),
   computed: {
-    isAuthenticated() {
-      return this.$store.getters['security/isAuthenticated']
-    },
-    isAdmin() {
-      return this.$store.getters['security/isAdmin']
-    },
+    ...mapGetters({
+      'isAuthenticated': 'security/isAuthenticated',
+      'isAdmin': 'security/isAdmin',
+    }),
   },
   watch: {
     $route(to, from) {

assets/vue/components/layout/Header.vue

@@ -93,7 +93,7 @@
             <b-avatar variant="light" />
           </template>
           <b-dropdown-text style="width: 240px;">
-            {{ username }}
+            {{ currentUser.username }}
           </b-dropdown-text>
           <b-dropdown-divider />
           <b-dropdown-item href="/main/messages/inbox.php">
@@ -111,6 +111,8 @@
   </b-navbar>
 </template>
 <script>
+import { mapGetters } from 'vuex';
+
 export default {
   components: {},
   props: {
@@ -129,12 +131,10 @@ export default {
     };
   },
   computed: {
-    isAuthenticated() {
-      return this.$store.getters['security/isAuthenticated']
-    },
-    username() {
-      return this.$store.getters['security/getUser'].username
-    }
+    ...mapGetters({
+      'isAuthenticated': 'security/isAuthenticated',
+      'currentUser': 'security/getUser',
+    }),
   },
   methods: {}
 };

assets/vue/components/layout/Sidebar.vue

@@ -23,7 +23,7 @@
         v-if="isAuthenticated"
         class="d-sm-none px-3 py-2 mb-0 bg-dark text-light"
       >
-        {{ username }}
+        {{ currentUser.username }}
       </p>
       <b-nav
         v-if="isAuthenticated"
@@ -86,14 +86,14 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
+
 export default {
   computed: {
-    isAuthenticated() {
-      return this.$store.getters['security/isAuthenticated']
-    },
-    username() {
-      return this.$store.getters['security/getUser'].username
-    }
+    ...mapGetters({
+      'isAuthenticated': 'security/isAuthenticated',
+      'currentUser': 'security/getUser',
+    }),
   },
 };
 

assets/vue/views/Login.vue

@@ -46,6 +46,7 @@
 </template>
 
 <script>
+    import { mapGetters } from 'vuex';
     import ErrorMessage from "../components/ErrorMessage";
 
     export default {
@@ -60,15 +61,11 @@
             };
         },
         computed: {
-            isLoading() {
-                return this.$store.getters["security/isLoading"];
-            },
-            hasError() {
-                return this.$store.getters["security/hasError"];
-            },
-            error() {
-                return this.$store.getters["security/error"];
-            }
+            ...mapGetters({
+                'isLoading': 'security/isLoading',
+                'hasError': 'security/hasError',
+                'error': 'security/error',
+            }),
         },
         created() {
             let redirect = this.$route.query.redirect;