Using router-link slots for header link indicators. Added release cache to store.

This commit is contained in:
ThePendulum 2020-02-10 02:05:28 +01:00
parent 2f66e36c28
commit 4c7c3c2ff4
4 changed files with 48 additions and 24 deletions

View File

@ -1,7 +1,7 @@
<template>
<header class="header">
<router-link
to="/"
to="/home"
class="logo-link"
><h1 class="logo"><Icon icon="logo" /></h1></router-link>
@ -9,31 +9,46 @@
<ul class="nolist">
<li class="nav-item">
<router-link
v-slot="{ isActive, navigate }"
to="/actors"
>
<a
class="nav-link"
:class="{ active: active === 'actors' }"
:class="{ active: isActive }"
@click="navigate"
>
<Icon icon="stars" /><span class="nav-label">Actors</span>
</a>
</router-link>
</li>
<li class="nav-item">
<router-link
v-slot="{ isActive, navigate }"
to="/networks"
>
<a
class="nav-link"
:class="{ active: active === 'networks' }"
:class="{ active: isActive }"
@click="navigate"
>
<Icon icon="earth2" /><span class="nav-label">Networks</span>
</a>
</router-link>
</li>
<li class="nav-item">
<router-link
v-slot="{ isActive, navigate }"
to="/tags"
>
<a
class="nav-link"
:class="{ active: active === 'tags' }"
:class="{ active: isActive }"
@click="navigate"
>
<Icon icon="price-tags" /><span class="nav-label">Tags</span>
</a>
</router-link>
</li>
</ul>
@ -41,18 +56,6 @@
</header>
</template>
<script>
function active() {
return this.$route.name;
}
export default {
computed: {
active,
},
};
</script>
<style lang="scss" scoped>
@import 'theme';
@ -97,6 +100,7 @@ export default {
text-decoration: none;
font-size: .9rem;
font-weight: bold;
cursor: pointer;
.icon {
fill: $shadow;

View File

@ -17,6 +17,10 @@ import Releases from '../releases/releases.vue';
async function fetchReleases() {
this.releases = await this.$store.dispatch('fetchReleases', { limit: 100 });
this.$store.commit('setCache', {
target: 'home',
releases: this.releases,
});
}
async function mounted() {
@ -39,6 +43,7 @@ export default {
},
data() {
return {
// releases: this.$store.state.releases.cache.home || [], // slows down apparent page load
releases: [],
networks: [],
pageTitle: null,

View File

@ -1 +1,14 @@
export default {};
import Vue from 'vue';
function setCache(state, { target, releases }) {
Vue.set(state.cache, target, releases);
}
function deleteCache(state, target) {
Vue.delete(state.cache, target);
}
export default {
setCache,
deleteCache,
};

View File

@ -1 +1,3 @@
export default {};
export default {
cache: {},
};