diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
index 0d7e271..040b1ee 100644
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@@ -83,6 +83,7 @@
 
 <script>
 import * as BIcons from "bootstrap-icons-vue";
+import {mapActions} from "vuex";
 
 export default {
     name: "Sidebar",
@@ -102,12 +103,15 @@ export default {
     },
     async mounted() {
         try {
-            const {commit} = await this.$store.dispatch('fetchBackendVersion')
+            const {commit} = await this.fetchBackendVersion()
             this.backendCommit = commit
         } catch (e) {
             console.error('could not fetch backend version', e)
         }
     },
+    methods: {
+        ...mapActions(['fetchBackendVersion']),
+    },
 }
 </script>
 
diff --git a/frontend/src/views/Scan.vue b/frontend/src/views/Scan.vue
index 67411a7..333272c 100644
--- a/frontend/src/views/Scan.vue
+++ b/frontend/src/views/Scan.vue
@@ -67,7 +67,7 @@
 </template>
 
 <script>
-import {mapActions} from "vuex";
+import {mapActions, mapGetters} from "vuex";
 import BaseLayout from "@/components/BaseLayout.vue";
 import CameraScanner from "@/components/CameraScanner.vue";
 import {encodeHandleForUrl, expandedRoute, OWNED_KIND_FIELDS} from "@/router";
@@ -143,6 +143,9 @@ export default {
             cameraLog: [],
         };
     },
+    computed: {
+        ...mapGetters(["identityHandleById", "groupHandleById"]),
+    },
     methods: {
         ...mapActions(["fetchItemByHandle", "fetchStorageLocationByHandle", "fetchIdMap", "resolveShortId"]),
 
@@ -193,37 +196,37 @@ export default {
             }
             if (decoded.kind === "item" || decoded.kind === "group_item") {
                 const byId = decoded.kind === "item"
-                    ? this.$store.getters.identityHandleById
-                    : this.$store.getters.groupHandleById;
+                    ? this.identityHandleById
+                    : this.groupHandleById;
                 const ownerId = decoded.kind === "item" ? decoded.owner_identity_id : decoded.owner_group_id;
                 let handle = byId[ownerId];
                 if (handle === undefined) {
                     await this.fetchIdMap();
                     handle = (decoded.kind === "item"
-                        ? this.$store.getters.identityHandleById
-                        : this.$store.getters.groupHandleById)[ownerId];
+                        ? this.identityHandleById
+                        : this.groupHandleById)[ownerId];
                 }
                 return handle === undefined ? null : this.describeItem(handle, decoded.item_local_id);
             }
             if (decoded.kind === "group") {
-                let handle = this.$store.getters.groupHandleById[decoded.group_id];
+                let handle = this.groupHandleById[decoded.group_id];
                 if (handle === undefined) {
                     await this.fetchIdMap();
-                    handle = this.$store.getters.groupHandleById[decoded.group_id];
+                    handle = this.groupHandleById[decoded.group_id];
                 }
                 return handle === undefined ? null : handle;
             }
             if (decoded.kind === "storage_location" || decoded.kind === "group_storage_location") {
                 const byId = decoded.kind === "storage_location"
-                    ? this.$store.getters.identityHandleById
-                    : this.$store.getters.groupHandleById;
+                    ? this.identityHandleById
+                    : this.groupHandleById;
                 const ownerId = decoded.kind === "storage_location" ? decoded.owner_identity_id : decoded.owner_group_id;
                 let handle = byId[ownerId];
                 if (handle === undefined) {
                     await this.fetchIdMap();
                     handle = (decoded.kind === "storage_location"
-                        ? this.$store.getters.identityHandleById
-                        : this.$store.getters.groupHandleById)[ownerId];
+                        ? this.identityHandleById
+                        : this.groupHandleById)[ownerId];
                 }
                 return handle === undefined ? null : this.describeLocation(handle, decoded.storage_location_id);
             }
diff --git a/frontend/src/views/ShortId.vue b/frontend/src/views/ShortId.vue
index f9c84db..ded9518 100644
--- a/frontend/src/views/ShortId.vue
+++ b/frontend/src/views/ShortId.vue
@@ -66,7 +66,7 @@
 </template>
 
 <script>
-import {mapActions} from 'vuex';
+import {mapActions, mapState} from 'vuex';
 import BaseLayout from '@/components/BaseLayout.vue';
 import {
     decodeShortId, deserializeShortId, encodeShortId, serializeShortId,
@@ -142,6 +142,7 @@ export default {
         }
     },
     computed: {
+        ...mapState(['idmapLoaded']),
         // '<domain>:~<token>' vs a bare '~<token>' - see docs/handles-and-shortids.md#domain-qualified-short-id.
         qualified() {
             return isDomainQualifiedShortId(this.short_id) ? decodeDomainQualifiedShortId(this.short_id) : null;
@@ -186,7 +187,7 @@ export default {
     },
     mounted() {
         this.resolveIfQualified();
-        if (NEEDS_IDMAP.has(this.deserialized.kind) && !this.$store.state.idmapLoaded) {
+        if (NEEDS_IDMAP.has(this.deserialized.kind) && !this.idmapLoaded) {
             this.fetchIdMap()
                 .then(() => this.resolveIfQualified())
                 .catch(e => {