introduce vuex

src/components/AutoComplete.vue

@@ -58,8 +58,9 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   </div>
 </template>
 <script>
-import RequestMixin from "@/mixins/request.mixin"
+import { mapState } from 'vuex'
 
+import RequestMixin from "@/mixins/request.mixin"
 import ProfileList from "@/components/ProfileList";
 
 export default {
@@ -87,6 +88,9 @@ export default {
       showErrorMessage: false,
     };
   },
+  computed: {
+    ...mapState(['currentUserId'])
+  },
   methods: {
     addResult(result = false) {
       if (!result) result = this.searchResults[0];
@@ -98,7 +102,7 @@ export default {
 
       let changeValues = Object.assign(this.values);
       let newValue = {
-        profile_id: localStorage.getItem("user_id"),
+        profile_id: this.currentUserId,
       };
       if (this.type != "contacttype") {
         newValue.level = 1;

src/components/Navbar.vue

@@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         <span class="d-sm-none">KI</span>
       </router-link>
       <button
-        @click="showMobileNavbar = !showMobileNavbar"
+        @click="toggleMobileNav"
         class="navbar-toggler"
         type="button"
         aria-controls="navbarSupportedContent"
@@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
       </button>
       <div
         class="collapse navbar-collapse"
-        :class="{ show: showMobileNavbar }"
+        :class="{ show: showMobileNav }"
         id="navbarSupportedContent"
       >
         <ul class="navbar-nav me-auto mb-2 mb-lg-0">
@@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           <li class="nav-item">
             <router-link
               class="nav-link"
-              :to="{ path: `/s/profile/${$root.memberId}` }"
+              :to="{ path: `/s/profile/${currentUserId}` }"
               active-class="active"
               >Mein Profil</router-link
             >
@@ -86,21 +86,29 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 
 <script>
 
-import RequestMixin from "@/mixins/request.mixin"
+import { mapState } from 'vuex'
+
+import RequestMixin from '@/mixins/request.mixin'
 
 export default {
-  name: "Navbar",
+  name: 'Navbar',
   mixins: [RequestMixin],
   data() {
     return {
-      showMobileNavbar: false,
-      searchText: ''
+      searchText: '',
+      showMobileNav: false
     }
   },
+  computed: {
+    ...mapState(['currentUserId'])
+  },
   methods: {
+    toggleMobileNav() {
+      this.showMobileNav = !this.showMobileNav
+    },
     logout() {
-      localStorage.clear();
-      this.$router.push({ path: "/" });
+      this.$store.dispatch('clear')
+      this.$router.push({ path: '/' });
     },
     searchRedirect() {
       this.$router.push({ path: `/s/search?text`, query: { query: this.searchText } } );