src/components/AutoComplete.vue

@@ -53,13 +53,10 @@
   </div>
 </template>
 <script>
-import RequestMixin from "@/mixins/request.mixin"
-
 import ProfileList from "@/components/ProfileList";
 
 export default {
   name: "AutoComplete",
-  mixins: [RequestMixin],
   components: {
     ProfileList,
   },
@@ -83,6 +80,31 @@ export default {
     };
   },
   methods: {
+    async search() {
+      try {
+        const request = await this.axios.get(
+          `${this.apiUrl}/${this.type}s?search=${this.searchText}`,
+          {
+            headers: {
+              Authorization: `Bearer ${localStorage.getItem("token")}`,
+            },
+          }
+        );
+        if (request.status === 200) {
+          this.searchResults = request.data[`${this.type}s`];
+          if (
+            !this.values
+              .map((item) => item[this.type].name.toLowerCase())
+              .includes(this.searchText.toLowerCase())
+          ) {
+            this.searchResults.unshift({ name: this.searchText });
+          }
+        }
+      } catch (error) {
+        console.error();
+        this.showErrorMessage = true;
+      }
+    },
     addResult(result = false) {
       if (!result) result = this.searchResults[0];
       if (

src/main.js

@@ -3,12 +3,15 @@ import { createApp } from 'vue/dist/vue.esm-bundler'
 import App from './App.vue'
 import router from './router'
 
+import axios from 'axios'
+
 import './assets/global.scss'
 
 const app = createApp(App)
 
 app.use(router)
 
+app.config.globalProperties.axios=axios
 app.config.globalProperties.apiUrl = window.ki.apiUrl
 
 app.mount('#app')

src/mixins/request.mixin.js

@@ -1,123 +0,0 @@
-import axios from "axios";
-
-export default {
-  methods: {
-    async submitLogin() {
-      this.showErrorMessage = false;
-      try {
-        const loginResult = await axios.post(
-          `${this.apiUrl}/users/login`,
-          {
-            username: this.username,
-            password: this.password,
-          }
-        );
-        if (loginResult.status === 200) {
-          this.showErrorMessage = false;
-          //success login
-          localStorage.setItem("token", loginResult.data.token);
-          localStorage.setItem("user_id", loginResult.data.user_id);
-          this.$router.push({ path: "/s/search" });
-        } else {
-          this.showErrorMessage = true;
-        }
-      } catch (error) {
-        console.error(error);
-        this.showErrorMessage = true;
-      }
-    },
-    async search() {
-      try {
-        const request = await axios.get(
-          `${this.apiUrl}/${this.type}s?search=${this.searchText}`,
-          {
-            headers: {
-              Authorization: `Bearer ${localStorage.getItem("token")}`,
-            },
-          }
-        );
-        if (request.status === 200) {
-          this.searchResults = request.data[`${this.type}s`];
-          if (
-            !this.values
-              .map((item) => item[this.type].name.toLowerCase())
-              .includes(this.searchText.toLowerCase())
-          ) {
-            this.searchResults.unshift({ name: this.searchText });
-          }
-        }
-      } catch (error) {
-        console.error();
-        this.showErrorMessage = true;
-      }
-    },
-    async initEditPage() {
-      try {
-        const userProfile = await axios.get(
-          `${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
-          {
-            headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
-          }
-        );
-        this.profile = userProfile.data.profile;
-      } catch (error) {
-        console.error(error);
-      }
-    },
-    async submitFormEdit() {
-      try {
-        const formSubmitResult = await axios.post(
-          `${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
-          this.profile,
-          {
-            headers: {
-              Authorization: `Bearer ${localStorage.getItem("token")}`,
-            },
-          }
-        );
-        if (formSubmitResult.status === 200) {
-          // success
-          this.showSuccessMessage = true;
-        } else {
-          // failure
-          this.showErrorMessage = true;
-        }
-      } catch (error) {
-        console.error(error);
-        this.showErrorMessage = true;
-      }
-    },
-    async initViewPage() {
-      try {
-        const userProfile = await axios.get(
-          `${this.apiUrl}/users/${this.$route.params.memberId}/profile`,
-          {
-            headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
-          }
-        );
-        this.profile = userProfile.data.profile;
-      } catch (error) {
-        console.error(error);
-      }
-    },
-    async submitSearch() {
-      this.showErrorMessage = false;
-      try {
-        let url = `${this.apiUrl}/users/profiles`;
-        if (this.searchText != "") {
-          url += `?nickname=${this.searchText}`;
-        }
-        const result = await axios.get(url, {
-          headers: {
-            Authorization: `Bearer ${localStorage.getItem("token")}`,
-          },
-        });
-        this.searchResults = result.data.profiles;
-        this.searchTotal = result.data.total;
-      } catch (error) {
-        console.error(error);
-        this.showErrorMessage = true;
-      }
-    },
-  },
-}

src/views/Index.vue

@@ -43,11 +43,10 @@
   </div>
 </template>
 <script>
-import RequestMixin from "@/mixins/request.mixin"
+import axios from "axios";
 
 export default {
   name: "Index",
-  mixins: [RequestMixin],
   data() {
     return {
       showErrorMessage: false,
@@ -55,5 +54,31 @@ export default {
       password: "",
     };
   },
+  methods: {
+    async submitLogin() {
+      this.showErrorMessage = false;
+      try {
+        const loginResult = await axios.post(
+          `${this.apiUrl}/users/login`,
+          {
+            username: this.username,
+            password: this.password,
+          }
+        );
+        if (loginResult.status === 200) {
+          this.showErrorMessage = false;
+          //success login
+          localStorage.setItem("token", loginResult.data.token);
+          localStorage.setItem("user_id", loginResult.data.user_id);
+          this.$router.push({ path: "/s/search" });
+        } else {
+          this.showErrorMessage = true;
+        }
+      } catch (error) {
+        console.error(error);
+        this.showErrorMessage = true;
+      }
+    },
+  },
 };
 </script>

src/views/Search.vue

@@ -63,11 +63,8 @@
   </div>
 </template>
 <script>
-import RequestMixin from "@/mixins/request.mixin"
-
 export default {
   name: "Search",
-  mixins: [RequestMixin],
   data() {
     return {
       showErrorMessage: false,
@@ -80,5 +77,26 @@ export default {
     if (this.$route.query.query) this.searchText = this.$route.query.query;
     this.submitSearch();
   },
+  methods: {
+    async submitSearch() {
+      this.showErrorMessage = false;
+      try {
+        let url = `${this.apiUrl}/users/profiles`;
+        if (this.searchText != "") {
+          url += `?nickname=${this.searchText}`;
+        }
+        const result = await this.axios.get(url, {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem("token")}`,
+          },
+        });
+        this.searchResults = result.data.profiles;
+        this.searchTotal = result.data.total;
+      } catch (error) {
+        console.error(error);
+        this.showErrorMessage = true;
+      }
+    },
+  },
 };
 </script>

src/views/profile/Edit.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="container">
     <h1>Profil bearbeiten</h1>
-    <form @submit.prevent="submitFormEdit()">
+    <form @submit.prevent="submitForm()">
       <div class="row">
         <div class="col">
           <input
@@ -163,13 +163,11 @@
   </div>
 </template>
 <script>
-import RequestMixin from "@/mixins/request.mixin"
+import axios from "axios";
-
 import AutoComplete from "@/components/AutoComplete";
 
 export default {
   name: "profileEdit",
-  mixins: [RequestMixin],
   components: {
     AutoComplete,
   },
@@ -197,7 +195,42 @@ export default {
     };
   },
   async created() {
-    await this.initEditPage();
+    try {
+      const userProfile = await axios.get(
+        `${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
+        {
+          headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+        }
+      );
+      this.profile = userProfile.data.profile;
+    } catch (error) {
+      console.error(error);
+    }
+  },
+  methods: {
+    async submitForm() {
+      try {
+        const formSubmitResult = await axios.post(
+          `${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
+          this.profile,
+          {
+            headers: {
+              Authorization: `Bearer ${localStorage.getItem("token")}`,
+            },
+          }
+        );
+        if (formSubmitResult.status === 200) {
+          // success
+          this.showSuccessMessage = true;
+        } else {
+          // failure
+          this.showErrorMessage = true;
+        }
+      } catch (error) {
+        console.error(error);
+        this.showErrorMessage = true;
+      }
+    },
   },
 };
 </script>

src/views/profile/View.vue

@@ -35,13 +35,10 @@
   </div>
 </template>
 <script>
-import RequestMixin from "@/mixins/request.mixin"
-
 import ProfileList from "@/components/ProfileList";
 
 export default {
   name: "profileView",
-  mixins: [RequestMixin],
   components: {
     ProfileList,
   },
@@ -51,7 +48,17 @@ export default {
     };
   },
   async created() {
-    await this.initViewPage();
+    try {
-  }
+      const userProfile = await this.axios.get(
+        `${this.apiUrl}/users/${this.$route.params.memberId}/profile`,
+        {
+          headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+        }
+      );
+      this.profile = userProfile.data.profile;
+    } catch (error) {
+      console.error(error);
+    }
+  },
 };
 </script>