⚡ Remove all instances of inject, replace with VueX store

src/components/Settings/LanguageSwitcher.vue

@@ -33,7 +33,6 @@ import { localStorageKeys, modalNames } from '@/utils/defaults';
 
 export default {
   name: 'LanguageSwitcher',
-  inject: ['config'],
   components: {
     Button,
     SaveConfigIcon,
@@ -45,6 +44,10 @@ export default {
     };
   },
   computed: {
+    /* Get appConfig from store */
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
     /* Return the array of language objects, plus a friends name */
     languageList: () => languages.map((lang) => {
       const newLang = lang;
@@ -85,7 +88,7 @@ export default {
     /* Gets the users current language from local storage */
     getCurrentLanguage() {
       const getLanguageFromIso = (iso) => languages.find((lang) => lang.code === iso);
-      const current = localStorage[localStorageKeys.LANGUAGE] || this.config.appConfig.language;
+      const current = localStorage[localStorageKeys.LANGUAGE] || this.appConfig.language;
       return getLanguageFromIso(current);
     },
   },

src/components/Settings/SearchBar.vue

@@ -35,7 +35,6 @@ import {
 
 export default {
   name: 'FilterTile',
-  inject: ['config'],
   props: {
     active: Boolean,
   },
@@ -48,7 +47,7 @@ export default {
   },
   computed: {
     searchPrefs() {
-      return this.config.appConfig.webSearch || {};
+      return this.$store.getters.webSearch || {};
     },
   },
   mounted() {

src/components/Settings/SettingsContainer.vue

@@ -69,7 +69,29 @@ export default {
     IconOpen,
     IconClose,
   },
-  inject: ['visibleComponents'],
+  computed: {
+    /**
+    * Determines which button should display, based on the user type
+    * 0 = Auth not configured, don't show anything
+    * 1 = Auth condifured, and user logged in, show logout button
+    * 2 = Auth configured, guest access enabled, and not logged in, show login
+    * Note that if auth is enabled, but not guest access, and user not logged in,
+    * then they will never be able to view the homepage, so no button needed
+    */
+    userState() {
+      return getUserState();
+    },
+    /* Object indicating which components should be hidden, based on user preferences */
+    visibleComponents() {
+      return this.$store.getters.visibleComponents;
+    },
+  },
+  data() {
+    return {
+      settingsVisible: this.getSettingsVisibility(),
+      searchVisible: (this.visibleComponents || defaultVisibleComponents).searchBar,
+    };
+  },
   methods: {
     userIsTypingSomething(something) {
       this.$emit('user-is-searchin', something);
@@ -104,25 +126,6 @@ export default {
         || (this.visibleComponents || defaultVisibleComponents).settings);
     },
   },
-  computed: {
-    /**
-    * Determines which button should display, based on the user type
-    * 0 = Auth not configured, don't show anything
-    * 1 = Auth condifured, and user logged in, show logout button
-    * 2 = Auth configured, guest access enabled, and not logged in, show login
-    * Note that if auth is enabled, but not guest access, and user not logged in,
-    * then they will never be able to view the homepage, so no button needed
-    */
-    userState() {
-      return getUserState();
-    },
-  },
-  data() {
-    return {
-      settingsVisible: this.getSettingsVisibility(),
-      searchVisible: (this.visibleComponents || defaultVisibleComponents).searchBar,
-    };
-  },
 };
 </script>