refactor(client): Use getters to avoid watch vuex

This commit is contained in:
syuilo 2020-05-09 15:22:50 +09:00
parent a1597047b4
commit 71e5892308
4 changed files with 112 additions and 133 deletions

View file

@ -1,109 +0,0 @@
import { faTerminal, faHashtag, faBroadcastTower, faFireAlt, faSearch, faStar, faAt, faListUl, faUserClock, faUsers, faCloud, faGamepad, faFileAlt, faSatellite } from '@fortawesome/free-solid-svg-icons';
import { faBell, faEnvelope, faComments } from '@fortawesome/free-regular-svg-icons';
export function createMenuDef(actions) {
return {
notifications: {
title: 'notifications',
icon: faBell,
show: store => store.getters.isSignedIn,
indicate: store => store.getters.isSignedIn && store.state.i.hasUnreadNotification,
to: '/my/notifications',
},
messaging: {
title: 'messaging',
icon: faComments,
show: store => store.getters.isSignedIn,
indicate: store => store.getters.isSignedIn && store.state.i.hasUnreadMessagingMessage,
to: '/my/messaging',
},
drive: {
title: 'drive',
icon: faCloud,
show: store => store.getters.isSignedIn,
to: '/my/drive',
},
followRequests: {
title: 'followRequests',
icon: faUserClock,
show: store => store.getters.isSignedIn && store.state.i.isLocked,
indicate: store => store.getters.isSignedIn && store.state.i.hasPendingReceivedFollowRequest,
to: '/my/follow-requests',
},
featured: {
title: 'featured',
icon: faFireAlt,
to: '/featured',
},
explore: {
title: 'explore',
icon: faHashtag,
to: '/explore',
},
announcements: {
title: 'announcements',
icon: faBroadcastTower,
indicate: store => store.getters.isSignedIn && store.state.i.hasUnreadAnnouncement,
to: '/announcements',
},
search: {
title: 'search',
icon: faSearch,
action: () => actions.search(),
},
lists: {
title: 'lists',
icon: faListUl,
show: store => store.getters.isSignedIn,
to: '/my/lists',
},
groups: {
title: 'groups',
icon: faUsers,
show: store => store.getters.isSignedIn,
to: '/my/groups',
},
antennas: {
title: 'antennas',
icon: faSatellite,
show: store => store.getters.isSignedIn,
to: '/my/antennas',
},
mentions: {
title: 'mentions',
icon: faAt,
show: store => store.getters.isSignedIn,
indicate: store => store.getters.isSignedIn && store.state.i.hasUnreadMentions,
to: '/my/mentions',
},
messages: {
title: 'directNotes',
icon: faEnvelope,
show: store => store.getters.isSignedIn,
indicate: store => store.getters.isSignedIn && store.state.i.hasUnreadSpecifiedNotes,
to: '/my/messages',
},
favorites: {
title: 'favorites',
icon: faStar,
show: store => store.getters.isSignedIn,
to: '/my/favorites',
},
pages: {
title: 'pages',
icon: faFileAlt,
show: store => store.getters.isSignedIn,
to: '/my/pages',
},
games: {
title: 'games',
icon: faGamepad,
to: '/games',
},
scratchpad: {
title: 'scratchpad',
icon: faTerminal,
to: '/scratchpad',
},
};
}

View file

@ -51,7 +51,7 @@
</router-link> </router-link>
<template v-for="item in menu"> <template v-for="item in menu">
<div v-if="item === '-'" class="divider"></div> <div v-if="item === '-'" class="divider"></div>
<component v-else-if="menuDef[item].display !== false" :is="menuDef[item].to ? 'router-link' : 'button'" class="item _button" :class="item" active-class="active" @click="() => { if (menuDef[item].action) menuDef[item].action() }" :to="menuDef[item].to"> <component v-else-if="menuDef[item].show !== false" :is="menuDef[item].to ? 'router-link' : 'button'" class="item _button" :class="item" active-class="active" @click="() => { if (menuDef[item].action) menuDef[item].action() }" :to="menuDef[item].to">
<fa :icon="menuDef[item].icon" fixed-width/><span class="text">{{ $t(menuDef[item].title) }}</span> <fa :icon="menuDef[item].icon" fixed-width/><span class="text">{{ $t(menuDef[item].title) }}</span>
<i v-if="menuDef[item].indicated"><fa :icon="faCircle"/></i> <i v-if="menuDef[item].indicated"><fa :icon="faCircle"/></i>
</component> </component>
@ -139,7 +139,6 @@ import { v4 as uuid } from 'uuid';
import i18n from './i18n'; import i18n from './i18n';
import { host, instanceName } from './config'; import { host, instanceName } from './config';
import { search } from './scripts/search'; import { search } from './scripts/search';
import { createMenuDef } from './app';
const DESKTOP_THRESHOLD = 1100; const DESKTOP_THRESHOLD = 1100;
@ -164,7 +163,7 @@ export default Vue.extend({
searchQuery: '', searchQuery: '',
searchWait: false, searchWait: false,
widgetsEditMode: false, widgetsEditMode: false,
menuDef: createMenuDef({ menuDef: this.$store.getters.nav({
search: this.search search: this.search
}), }),
isDesktop: window.innerWidth >= DESKTOP_THRESHOLD, isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
@ -241,23 +240,6 @@ export default Vue.extend({
id: 'c', data: {} id: 'c', data: {}
}]); }]);
} }
this.$store.watch(state => state.i, i => {
for (const def in this.menuDef) {
if (this.menuDef[def].indicate) {
Vue.set(this.menuDef[def], 'indicated', this.menuDef[def].indicate(this.$store));
}
if (this.menuDef[def].show) {
Vue.set(this.menuDef[def], 'display', this.menuDef[def].show(this.$store));
}
}
}, { immediate: true, deep: true });
} else {
for (const def in this.menuDef) {
if (this.menuDef[def].show) {
Vue.set(this.menuDef[def], 'display', this.menuDef[def].show(this.$store));
}
}
} }
}, },
@ -445,13 +427,13 @@ export default Vue.extend({
}, },
more(ev) { more(ev) {
const items = Object.keys(this.menuDef).filter(k => !this.menu.includes(k)).map(k => this.menuDef[k]).filter(def => def.show ? def.show(this.$store) : true).map(def => ({ const items = Object.keys(this.menuDef).filter(k => !this.menu.includes(k)).map(k => this.menuDef[k]).filter(def => def.show == null ? true : def.show).map(def => ({
type: def.to ? 'link' : 'button', type: def.to ? 'link' : 'button',
text: this.$t(def.title), text: this.$t(def.title),
icon: def.icon, icon: def.icon,
to: def.to, to: def.to,
action: def.action, action: def.action,
indicate: def.indicate ? def.indicate(this.$store) : false, indicate: def.indicated,
})); }));
this.$root.menu({ this.$root.menu({
items: [...items, null, { items: [...items, null, {

View file

@ -21,7 +21,6 @@ import MkButton from '../../components/ui/button.vue';
import MkTextarea from '../../components/ui/textarea.vue'; import MkTextarea from '../../components/ui/textarea.vue';
import i18n from '../../i18n'; import i18n from '../../i18n';
import { defaultDeviceUserSettings } from '../../store'; import { defaultDeviceUserSettings } from '../../store';
import { createMenuDef } from '../../app';
export default Vue.extend({ export default Vue.extend({
i18n, i18n,
@ -33,7 +32,7 @@ export default Vue.extend({
data() { data() {
return { return {
menuDef: createMenuDef({}), menuDef: this.$store.getters.nav({}),
items: '', items: '',
faListUl, faSave, faRedo faListUl, faSave, faRedo
} }

View file

@ -1,6 +1,8 @@
import Vuex from 'vuex'; import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate'; import createPersistedState from 'vuex-persistedstate';
import * as nestedProperty from 'nested-property'; import * as nestedProperty from 'nested-property';
import { faTerminal, faHashtag, faBroadcastTower, faFireAlt, faSearch, faStar, faAt, faListUl, faUserClock, faUsers, faCloud, faGamepad, faFileAlt, faSatellite, faDoorClosed } from '@fortawesome/free-solid-svg-icons';
import { faBell, faEnvelope, faComments } from '@fortawesome/free-regular-svg-icons';
import { apiUrl } from './config'; import { apiUrl } from './config';
export const defaultSettings = { export const defaultSettings = {
@ -81,6 +83,111 @@ export default () => new Vuex.Store({
getters: { getters: {
isSignedIn: state => state.i != null, isSignedIn: state => state.i != null,
nav: (state, getters) => actions => ({
notifications: {
title: 'notifications',
icon: faBell,
get show() { return getters.isSignedIn; },
get indicated() { return getters.isSignedIn && state.i.hasUnreadNotification; },
to: '/my/notifications',
},
messaging: {
title: 'messaging',
icon: faComments,
get show() { return getters.isSignedIn; },
get indicated() { return getters.isSignedIn && state.i.hasUnreadMessagingMessage; },
to: '/my/messaging',
},
drive: {
title: 'drive',
icon: faCloud,
get show() { return getters.isSignedIn; },
to: '/my/drive',
},
followRequests: {
title: 'followRequests',
icon: faUserClock,
get show() { return getters.isSignedIn && state.i.isLocked; },
get indicated() { return getters.isSignedIn && state.i.hasPendingReceivedFollowRequest; },
to: '/my/follow-requests',
},
featured: {
title: 'featured',
icon: faFireAlt,
to: '/featured',
},
explore: {
title: 'explore',
icon: faHashtag,
to: '/explore',
},
announcements: {
title: 'announcements',
icon: faBroadcastTower,
get indicated() { return getters.isSignedIn && state.i.hasUnreadAnnouncement; },
to: '/announcements',
},
search: {
title: 'search',
icon: faSearch,
action: () => actions.search(),
},
lists: {
title: 'lists',
icon: faListUl,
get show() { return getters.isSignedIn; },
to: '/my/lists',
},
groups: {
title: 'groups',
icon: faUsers,
get show() { return getters.isSignedIn; },
to: '/my/groups',
},
antennas: {
title: 'antennas',
icon: faSatellite,
get show() { return getters.isSignedIn; },
to: '/my/antennas',
},
mentions: {
title: 'mentions',
icon: faAt,
get show() { return getters.isSignedIn; },
get indicated() { return getters.isSignedIn && state.i.hasUnreadMentions; },
to: '/my/mentions',
},
messages: {
title: 'directNotes',
icon: faEnvelope,
get show() { return getters.isSignedIn; },
get indicated() { return getters.isSignedIn && state.i.hasUnreadSpecifiedNotes; },
to: '/my/messages',
},
favorites: {
title: 'favorites',
icon: faStar,
get show() { return getters.isSignedIn; },
to: '/my/favorites',
},
pages: {
title: 'pages',
icon: faFileAlt,
get show() { return getters.isSignedIn; },
to: '/my/pages',
},
games: {
title: 'games',
icon: faGamepad,
to: '/games',
},
scratchpad: {
title: 'scratchpad',
icon: faTerminal,
to: '/scratchpad',
},
}),
}, },
mutations: { mutations: {