Title für MainLink aus dem Store

Funktion implementiert, damit Namen aus dem Store (getters) geladen werden können. Sobald im Title 'loadFromStore("<parameter>")' vorhanden ist, wird $store.dispatch(parameter) aufgerufen und als titel rausgegeben.

src/components/navigation/EssentialLink.vue

@@ -1,19 +1,11 @@
 <template>
-  <q-item
-    clickable
-    tag="a"
-    target="self"
-    :to="{name:link}"
-  >
-    <q-item-section
-      v-if="icon"
-      avatar
-    >
+  <q-item clickable tag="a" target="self" :to="{ name: link }">
+    <q-item-section v-if="icon" avatar>
       <q-icon :name="icon" />
     </q-item-section>
 
     <q-item-section>
-      <q-item-label>{{ title }}</q-item-label>
+      <q-item-label>{{ realTitle }}</q-item-label>
       <q-item-label caption>
         {{ caption }}
       </q-item-label>
@@ -22,30 +14,48 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { computed, defineComponent } from '@vue/composition-api';
 
 export default defineComponent({
   name: 'EssentialLink',
   props: {
     title: {
       type: String,
-      required: true,
+      required: true
     },
 
     caption: {
       type: String,
-      default: '',
+      default: ''
     },
 
     link: {
       type: String,
-      default: 'home',
+      default: 'home'
     },
 
     icon: {
       type: String,
-      default: '',
-    },
+      default: ''
+    }
   },
+
+  setup(props, { root }) {
+    let title = props.title;
+    if (props.title.includes('loadFromStore')) {
+      const startIndex = props.title.indexOf('(') + 1;
+      const endIndex = props.title.indexOf(')');
+      const substring = props.title
+        .substring(startIndex, endIndex)
+        .replace(/"/g, '');
+      console.log(substring);
+      console.log(root.$store.getters[substring]);
+      console.log('loadFromStore');
+      title = computed(() => {
+        return root.$store.getters[substring];
+      });
+    }
+    return { realTitle: title };
+  }
 });
 </script>

src/config.ts

@@ -1,5 +1,5 @@
 const config = {
-    baseURL: "http://flaschengeist.local:5000"
+  baseURL: 'http://localhost:5000'
 };
 
 export default config;

src/plugins/user/plugin.ts

@@ -6,7 +6,7 @@ import routes from './routes';
 
 const mainLink: PluginMainLink = {
   name: 'user',
-  title: 'User',
+  title: 'loadFromStore("user/displayName")',
   link: 'user',
   icon: 'mdi-account',
   children: [

src/plugins/user/store/user.ts

@@ -134,6 +134,9 @@ const getters: GetterTree<UserStateInterface, StateInterface> = {
   },
   loginLoading({ loginLoading }) {
     return loginLoading;
+  },
+  displayName({ user }) {
+    return `${user.firstname} ${user.lastname}`;
   }
 };