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.
This commit is contained in:
Tim Gröger 2020-10-17 12:56:25 +02:00
parent 0cdfe7f11c
commit 1e64cc3f60
4 changed files with 33 additions and 20 deletions

View File

@ -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>

View File

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

View File

@ -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: [

View File

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