migrate adminSettings to pinia

src/components/settings_modal/admin_tabs/admin_card.js

@@ -7,7 +7,7 @@ import { useAdminUsersStore } from 'src/stores/adminUsers.js'
 const AdminCard = {
   props: {
     userId: {
-      type: String
+      type: String,
     },
   },
   components: {
@@ -43,7 +43,7 @@ const AdminCard = {
     },
     isConfirmed() {
       return this.userAdminData.is_confirmed
-    }
+    },
   },
 }
 

src/components/settings_modal/admin_tabs/auth_tab.js

@@ -9,6 +9,8 @@ import SharedComputedObject from '../helpers/shared_computed_object.js'
 import StringSetting from '../helpers/string_setting.vue'
 import TupleSetting from '../helpers/tuple_setting.vue'
 
+import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
+
 const AuthTab = {
   provide() {
     return {
@@ -30,9 +32,7 @@ const AuthTab = {
   computed: {
     ...SharedComputedObject(),
     LDAPEnabled() {
-      return this.$store.state.adminSettings.draft[':pleroma'][':ldap'][
+      return useAdminSettingsStore().draft[':pleroma'][':ldap'][':enabled']
-        ':enabled'
-      ]
     },
   },
 }

src/components/settings_modal/admin_tabs/frontends_tab.js

@@ -7,6 +7,7 @@ import IntegerSetting from '../helpers/integer_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import StringSetting from '../helpers/string_setting.vue'
 
+import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -43,7 +44,7 @@ const FrontendsTab = {
   computed: {
     ...SharedComputedObject(),
     frontends() {
-      return this.$store.state.adminSettings.frontends
+      return useAdminSettingsStore().frontends
     },
   },
   methods: {
@@ -104,7 +105,7 @@ const FrontendsTab = {
       const ref = suggestRef || this.getSuggestedRef(frontend)
       const { name } = frontend
 
-      this.$store.commit('updateAdminDraft', {
+      useAdminSettingsStore.updateAdminDraft({
         path: [':pleroma', ':frontends', ':primary'],
         value: { name, ref },
       })

src/components/settings_modal/admin_tabs/http_tab.js

@@ -12,6 +12,8 @@ import SharedComputedObject from '../helpers/shared_computed_object.js'
 import StringSetting from '../helpers/string_setting.vue'
 import TupleSetting from '../helpers/tuple_setting.vue'
 
+import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
+
 const HTTPTab = {
   provide() {
     return {
@@ -35,7 +37,7 @@ const HTTPTab = {
     ...SharedComputedObject(),
     sslOptions() {
       const desc = get(
-        this.$store.state.adminSettings.descriptions,
+        useAdminSettingsStore().descriptions,
         ':pleroma.:http.:adapter.:ssl_options.:versions',
       )
       return new Set(

src/components/settings_modal/admin_tabs/instance_tab.js

@@ -12,6 +12,8 @@ import PWAManifestIconsSetting from '../helpers/pwa_manifest_icons_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import StringSetting from '../helpers/string_setting.vue'
 
+import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
+
 const InstanceTab = {
   provide() {
     return {
@@ -34,7 +36,7 @@ const InstanceTab = {
   computed: {
     ...SharedComputedObject(),
     providersOptions() {
-      const desc = get(this.$store.state.adminSettings.descriptions, [
+      const desc = get(useAdminSettingsStore().descriptions, [
         ':pleroma',
         'Pleroma.Web.Metadata',
         ':providers',
@@ -47,7 +49,7 @@ const InstanceTab = {
       )
     },
     limitLocalContentOptions() {
-      const desc = get(this.$store.state.adminSettings.descriptions, [
+      const desc = get(useAdminSettingsStore().descriptions, [
         ':pleroma',
         ':instance',
         ':limit_to_local_content',

src/components/settings_modal/admin_tabs/links_tab.js

@@ -10,6 +10,8 @@ import ListSetting from '../helpers/list_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import StringSetting from '../helpers/string_setting.vue'
 
+import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
+
 const LinksTab = {
   provide() {
     return {
@@ -30,27 +32,27 @@ const LinksTab = {
   computed: {
     classIsPresent() {
       return (
-        this.$store.state.adminSettings.draft[':pleroma']['Pleroma.Formatter'][
+        useAdminSettingsStore().draft[':pleroma']['Pleroma.Formatter'][
           ':class'
         ] !== false
       )
     },
     relIsPresent() {
       return (
-        this.$store.state.adminSettings.draft[':pleroma']['Pleroma.Formatter'][
+        useAdminSettingsStore().draft[':pleroma']['Pleroma.Formatter'][
           ':rel'
         ] !== false
       )
     },
     truncateIsPresent() {
       return (
-        this.$store.state.adminSettings.draft[':pleroma']['Pleroma.Formatter'][
+        useAdminSettingsStore().draft[':pleroma']['Pleroma.Formatter'][
           ':truncate'
         ] !== false
       )
     },
     truncateDescription() {
-      return get(this.$store.state.adminSettings.descriptions, [
+      return get(useAdminSettingsStore().descriptions, [
         ':pleroma',
         'Pleroma.Formatter',
         ':truncate',
@@ -58,7 +60,7 @@ const LinksTab = {
     },
     ttlSettersOptions() {
       const desc = get(
-        this.$store.state.adminSettings.descriptions,
+        useAdminSettingsStore().descriptions,
         ':pleroma.:rich_media.:ttl_setters',
       )
       return new Set(
@@ -70,7 +72,7 @@ const LinksTab = {
     },
     parsersOptions() {
       const desc = get(
-        this.$store.state.adminSettings.descriptions,
+        useAdminSettingsStore().descriptions,
         ':pleroma.:rich_media.:parsers',
       )
       return new Set(
@@ -97,12 +99,12 @@ const LinksTab = {
       ]
     },
     mediaProxyEnabled() {
-      return this.$store.state.adminSettings.draft[':pleroma'][':media_proxy'][
+      return useAdminSettingsStore().draft[':pleroma'][':media_proxy'][
         ':enabled'
       ]
     },
     mediaInvalidationProvider() {
-      return this.$store.state.adminSettings.draft[':pleroma'][':media_proxy'][
+      return useAdminSettingsStore().draft[':pleroma'][':media_proxy'][
         ':invalidation'
       ][':provider']
     },
@@ -110,19 +112,19 @@ const LinksTab = {
   },
   methods: {
     checkRel(e) {
-      this.$store.commit('updateAdminDraft', {
+      useAdminSettingsStore.updateAdminDraft({
         path: [':pleroma', 'Pleroma.Formatter', ':rel'],
         value: e ? '' : false,
       })
     },
     checkClass(e) {
-      this.$store.commit('updateAdminDraft', {
+      useAdminSettingsStore.updateAdminDraft({
         path: [':pleroma', 'Pleroma.Formatter', ':class'],
         value: e ? '' : false,
       })
     },
     checkTruncate(e) {
-      this.$store.commit('updateAdminDraft', {
+      useAdminSettingsStore.updateAdminDraft({
         path: [':pleroma', 'Pleroma.Formatter', ':truncate'],
         value: e ? 20 : false,
       })

src/components/settings_modal/admin_tabs/mailer_tab.js

@@ -7,6 +7,8 @@ import IntegerSetting from '../helpers/integer_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import StringSetting from '../helpers/string_setting.vue'
 
+import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
+
 const MailerTab = {
   provide() {
     return {
@@ -26,7 +28,7 @@ const MailerTab = {
   computed: {
     adaptersLabels() {
       const prefix = 'Swoosh.Adapters.'
-      const descriptions = this.$store.state.adminSettings.descriptions
+      const descriptions = useAdminSettingsStore().descriptions
       const options =
         descriptions[':pleroma']['Pleroma.Emails.Mailer'][':adapter']
           .suggestions
@@ -46,20 +48,20 @@ const MailerTab = {
       // ]))
     },
     adapter() {
-      return this.$store.state.adminSettings.draft[':pleroma'][
+      return useAdminSettingsStore().draft[':pleroma']['Pleroma.Emails.Mailer'][
-        'Pleroma.Emails.Mailer'
+        ':adapter'
-      ][':adapter']
+      ]
     },
     mailerEnabled() {
-      return this.$store.state.adminSettings.draft[':pleroma'][
+      return useAdminSettingsStore().draft[':pleroma']['Pleroma.Emails.Mailer'][
-        'Pleroma.Emails.Mailer'
+        ':enabled'
-      ][':enabled']
+      ]
     },
     ...SharedComputedObject(),
   },
   methods: {
     adapterHasKey(key) {
-      const descriptions = this.$store.state.adminSettings.descriptions
+      const descriptions = useAdminSettingsStore().descriptions
       const mailerStuff = descriptions[':pleroma']['Pleroma.Emails.Mailer']
       const adapterStuff = mailerStuff[':subgroup,' + this.adapter]
       return Object.hasOwn(adapterStuff, key)

src/components/settings_modal/admin_tabs/media_proxy_tab.js

@@ -7,6 +7,8 @@ import ListSetting from '../helpers/list_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import StringSetting from '../helpers/string_setting.vue'
 
+import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
+
 const MediaProxyTab = {
   provide() {
     return {
@@ -25,12 +27,12 @@ const MediaProxyTab = {
   },
   computed: {
     mediaProxyEnabled() {
-      return this.$store.state.adminSettings.draft[':pleroma'][':media_proxy'][
+      return useAdminSettingsStore().draft[':pleroma'][':media_proxy'][
         ':enabled'
       ]
     },
     mediaInvalidationProvider() {
-      return this.$store.state.adminSettings.draft[':pleroma'][':media_proxy'][
+      return useAdminSettingsStore().draft[':pleroma'][':media_proxy'][
         ':invalidation'
       ][':provider']
     },

src/components/settings_modal/admin_tabs/uploads_tab.js

@@ -4,6 +4,8 @@ import IntegerSetting from '../helpers/integer_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import StringSetting from '../helpers/string_setting.vue'
 
+import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
+
 const UploadsTab = {
   provide() {
     return {
@@ -40,9 +42,9 @@ const UploadsTab = {
   },
   computed: {
     uploader() {
-      return this.$store.state.adminSettings.draft[':pleroma'][
+      return useAdminSettingsStore().draft[':pleroma']['Pleroma.Upload'][
-        'Pleroma.Upload'
+        ':uploader'
-      ][':uploader']
+      ]
     },
     ...SharedComputedObject(),
   },

src/components/settings_modal/admin_tabs/users_tab.js

@@ -115,7 +115,8 @@ const UsersTab = {
   },
   methods: {
     fetchUsers(page) {
-      return useAdminUsersStore().fetchAdminUsers({
+      return useAdminUsersStore()
+        .fetchAdminUsers({
           ...this.fetchOptions,
           page,
         })

src/components/settings_modal/helpers/setting.js

@@ -4,6 +4,7 @@ import DraftButtons from './draft_buttons.vue'
 import LocalSettingIndicator from './local_setting_indicator.vue'
 import ModifiedIndicator from './modified_indicator.vue'
 
+import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
 import { useLocalConfigStore } from 'src/stores/local_config.js'
@@ -125,14 +126,14 @@ export default {
     draft: {
       get() {
         if (this.realSource === 'admin' || this.path == null) {
-          return get(this.$store.state.adminSettings.draft, this.canonPath)
+          return get(useAdminSettingsStore().draft, this.canonPath)
         } else {
           return this.localDraft
         }
       },
       set(value) {
         if (this.realSource === 'admin' || this.path == null) {
-          this.$store.commit('updateAdminDraft', {
+          useAdminSettingsStore.updateAdminDraft({
             path: this.canonPath,
             value,
           })
@@ -164,10 +165,7 @@ export default {
         : this.draftMode
     },
     backendDescription() {
-      return get(
+      return get(useAdminSettingsStore().descriptions, this.descriptionPath)
-        this.$store.state.adminSettings.descriptions,
-        this.descriptionPath,
-      )
     },
     backendDescriptionLabel() {
       if (this.realSource !== 'admin') return ''
@@ -221,10 +219,7 @@ export default {
       let parentValue = null
       if (this.parentPath !== undefined && this.realSource === 'admin') {
         if (this.realDraftMode) {
-          parentValue = get(
+          parentValue = get(useAdminSettingsStore().draft, this.parentPath)
-            this.$store.state.adminSettings.draft,
-            this.parentPath,
-          )
         } else {
           parentValue = get(this.configSource, this.parentPath)
         }
@@ -243,7 +238,7 @@ export default {
         case 'profile':
           return this.$store.state.profileConfig
         case 'admin':
-          return this.$store.state.adminSettings.config
+          return useAdminSettingsStore().config
         default:
           return useMergedConfigStore().mergedConfig
       }
@@ -259,7 +254,7 @@ export default {
             this.$store.dispatch('setProfileOption', { name: k, value: v })
         case 'admin':
           return (k, v) =>
-            this.$store.dispatch('pushAdminSetting', { path: k, value: v })
+            useAdminSettingsStore.pushAdminSetting({ path: k, value: v })
         default:
           return (readPath, value) => {
             const writePath = `${readPath}`
@@ -372,9 +367,7 @@ export default {
     canHardReset() {
       return (
         this.realSource === 'admin' &&
-        this.$store.state.adminSettings.modifiedPaths?.has(
+        useAdminSettingsStore().modifiedPaths?.has(this.canonPath.join(' -> '))
-          this.canonPath.join(' -> '),
-        )
       )
     },
     matchesExpertLevel() {

src/components/settings_modal/settings_modal.js

@@ -8,6 +8,7 @@ import Modal from 'src/components/modal/modal.vue'
 import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
 import Popover from 'src/components/popover/popover.vue'
 
+import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
 import { useLocalConfigStore } from 'src/stores/local_config.js'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
@@ -232,10 +233,10 @@ const SettingsModal = {
       return clone
     },
     resetAdminDraft() {
-      this.$store.commit('resetAdminDraft')
+      useAdminSettingsStore.resetAdminDraft()
     },
     pushAdminDraft() {
-      this.$store.dispatch('pushAdminDraft')
+      useAdminSettingsStore.pushAdminDraft()
     },
     ...mapActions(useInterfaceStore, [
       'temporaryChangesRevert',
@@ -265,8 +266,8 @@ const SettingsModal = {
     },
     adminDraftAny() {
       return !isEqual(
-        this.$store.state.adminSettings.config,
+        useAdminSettingsStore().config,
-        this.$store.state.adminSettings.draft,
+        useAdminSettingsStore().draft,
       )
     },
   },

src/components/settings_modal/settings_modal_admin_content.js

@@ -19,6 +19,7 @@ import UploadsTab from './admin_tabs/uploads_tab.vue'
 import UsersTab from './admin_tabs/users_tab.vue'
 import VerticalTabSwitcher from './helpers/vertical_tab_switcher.jsx'
 
+import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -109,18 +110,18 @@ const SettingsModalAdminContent = {
       return useInterfaceStore().settingsModalState === 'visible'
     },
     adminDbLoaded() {
-      return this.$store.state.adminSettings.loaded
+      return useAdminSettingsStore().loaded
     },
     adminDescriptionsLoaded() {
-      return this.$store.state.adminSettings.descriptions !== null
+      return useAdminSettingsStore().descriptions !== null
     },
     noDb() {
-      return this.$store.state.adminSettings.dbConfigEnabled === false
+      return useAdminSettingsStore().dbConfigEnabled === false
     },
   },
   created() {
     if (this.user.rights.admin) {
-      this.$store.dispatch('loadAdminStuff')
+      useAdminSettingsStore().loadAdminStuff()
     }
   },
   methods: {

src/modules/index.js

@@ -1,4 +1,3 @@
-import adminSettings from './adminSettings.js'
 import api from './api.js'
 import chats from './chats.js'
 import drafts from './drafts.js'
@@ -13,7 +12,6 @@ export default {
   users,
   api,
   profileConfig,
-  adminSettings,
   drafts,
   chats,
 }

src/stores/admin_settings.js

@@ -1,4 +1,5 @@
 import { cloneDeep, differenceWith, flatten, get, isEqual, set } from 'lodash'
+import { defineStore } from 'pinia'
 
 export const defaultState = {
   frontends: [],
@@ -15,17 +16,17 @@ export const newUserFlags = {
   ...defaultState.flagStorage,
 }
 
-const adminSettingsStorage = {
+export const useAdminSettingsStore = defineStore('adminSettings', {
-  state: {
+  state: () => ({
     ...cloneDeep(defaultState),
-  },
+  }),
-  mutations: {
+  actions: {
-    setInstanceAdminNoDbConfig(state) {
+    setInstanceAdminNoDbConfig() {
-      state.loaded = false
+      this.loaded = false
-      state.dbConfigEnabled = false
+      this.dbConfigEnabled = false
     },
-    setAvailableFrontends(state, { frontends }) {
+    setAvailableFrontends({ frontends }) {
-      state.frontends = frontends.map((f) => {
+      this.frontends = frontends.map((f) => {
         f.installedRefs = f.installed_refs
         if (f.name === 'pleroma-fe') {
           f.refs = ['master', 'develop']
@@ -35,58 +36,60 @@ const adminSettingsStorage = {
         return f
       })
     },
-    updateAdminSettings(state, { config, modifiedPaths }) {
+    updateAdminSettings({ config, modifiedPaths }) {
-      state.loaded = true
+      this.loaded = true
-      state.dbConfigEnabled = true
+      this.dbConfigEnabled = true
-      state.config = config
+      this.config = config
-      state.modifiedPaths = modifiedPaths
+      this.modifiedPaths = modifiedPaths
     },
-    updateAdminDescriptions(state, { descriptions }) {
+    updateAdminDescriptions({ descriptions }) {
-      state.descriptions = descriptions
+      this.descriptions = descriptions
     },
-    updateAdminDraft(state, { path, value }) {
+    updateAdminDraft({ path, value }) {
       const [group, key, subkey] = path
       const parent = [group, key, subkey]
 
-      set(state.draft, path, value)
+      set(this.draft, path, value)
 
       // force-updating grouped draft to trigger refresh of group settings
       if (path.length > parent.length) {
-        set(state.draft, parent, cloneDeep(get(state.draft, parent)))
+        set(this.draft, parent, cloneDeep(get(this.draft, parent)))
       }
     },
-    resetAdminDraft(state) {
+    resetAdminDraft() {
-      state.draft = cloneDeep(state.config)
+      this.draft = cloneDeep(this.config)
     },
-  },
+    async fetchAdminUsers(opts) {
-  actions: {
+      const data = await window.vuex.state.api.backendInteractor.adminListUsers(
-    async fetchAdminUsers(store, opts) {
+        {
-      const data = await store.rootState.api.backendInteractor.adminListUsers({
+          opts,
-        opts,
+        },
-      })
-      data.users.forEach((user) =>
-        store.dispatch('fetchUserIfMissing', user.id),
       )
+
+      data.users.forEach((user) =>
+        window.vuex.dispatch('fetchUserIfMissing', user.id),
+      )
+
       return data
     },
-    adminAddUserToAdminGroup(store, user) {
+    adminAddUserToAdminGroup(user) {
-      store.rootState.api.backendInteractor
+      window.vuex.state.api.backendInteractor
         .adminAddUserToAdminGroup({ user })
         .then((res) =>
-          store.commit('updateRight', {
+          window.vuex.commit('updateRight', {
             user,
             right: 'admin',
             value: res.is_admin,
           }),
         )
     },
-    adminRemoveUserFromAdminGroup(store, user) {
+    adminRemoveUserFromAdminGroup(user) {
       // prevent revokation of own rights
-      if (user.id !== store.rootState.users.currentUser.id) {
+      if (user.id !== window.vuex.state.users.currentUser.id) {
-        return store.rootState.api.backendInteractor
+        return window.vuex.state.api.backendInteractor
           .adminRemoveUserFromAdminGroup({ user })
           .then((res) =>
-            store.commit('updateRight', {
+            window.vuex.commit('updateRight', {
               user,
               right: 'admin',
               value: res.is_admin,
@@ -94,24 +97,24 @@ const adminSettingsStorage = {
           )
       }
     },
-    adminAddUserToModeratorGroup(store, user) {
+    adminAddUserToModeratorGroup(user) {
-      return store.rootState.api.backendInteractor
+      return window.vuex.state.api.backendInteractor
         .adminAddUserToModeratorGroup({ user })
         .then((res) =>
-          store.commit('updateRight', {
+          window.vuex.commit('updateRight', {
             user,
             right: 'moderator',
             value: res.is_moderator,
           }),
         )
     },
-    adminRemoveUserFromModeratorGroup(store, user) {
+    adminRemoveUserFromModeratorGroup(user) {
       // prevent revokation of own rights
-      if (user.id !== store.state.users.currentUser.id) {
+      if (user.id !== window.vuex.state.users.currentUser.id) {
-        return store.rootState.api.backendInteractor
+        return window.vuex.state.api.backendInteractor
           .adminRemoveUserFromModeratorGroup({ user })
           .then((res) =>
-            store.commit('updateRight', {
+            window.vuex.commit('updateRight', {
               user,
               right: 'moderator',
               value: res.is_moderator,
@@ -119,89 +122,89 @@ const adminSettingsStorage = {
           )
       }
     },
-    adminActivateUser(store, user) {
+    adminActivateUser(user) {
-      return store.rootState.api.backendInteractor
+      return window.vuex.state.api.backendInteractor
         .activateUser({ user })
         .then((res) => {
           const deactivated = !res.is_active
-          store.commit('updateActivationStatus', { user, deactivated })
+          window.vuex.commit('updateActivationStatus', { user, deactivated })
         })
     },
-    adminDeactivateUser(store, user) {
+    adminDeactivateUser(user) {
-      return store.rootState.api.backendInteractor
+      return window.vuex.state.api.backendInteractor
         .deactivateUser({ user })
         .then((res) => {
           const deactivated = !res.is_active
-          store.commit('updateActivationStatus', { user, deactivated })
+          window.vuex.commit('updateActivationStatus', { user, deactivated })
         })
     },
-    adminDeleteUser(store, user) {
+    adminDeleteUser(user) {
-      return store.rootState.api.backendInteractor.deleteUser({ user })
+      return window.vuex.state.api.backendInteractor.deleteUser({ user })
     },
-    adminConfirmUser(store, user) {
+    adminConfirmUser(user) {
-      return store.rootState.api.backendInteractor
+      return window.vuex.state.api.backendInteractor
         .adminConfirmUser({ user })
-        .then(() => store.dispatch('fetchUser', user.id))
+        .then(() => window.vuex.dispatch('fetchUser', user.id))
     },
-    adminResendConfirmationEmail(store, user) {
+    adminResendConfirmationEmail(user) {
-      return store.rootState.api.backendInteractor.adminResendConfirmationEmail(
+      return window.vuex.state.api.backendInteractor.adminResendConfirmationEmail(
         { user },
       )
     },
-    adminApproveUser(store, user) {
+    adminApproveUser(user) {
-      return store.rootState.api.backendInteractor.adminApproveUser({ user })
+      return window.vuex.state.api.backendInteractor.adminApproveUser({ user })
     },
-    adminListStatuses(store, { userId, opts }) {
+    adminListStatuses({ userId, opts }) {
-      return store.rootState.api.backendInteractor.adminListStatuses({
+      return window.vuex.state.api.backendInteractor.adminListStatuses({
         userId,
         opts,
       })
     },
-    adminChangeStatusScope(store, { opts }) {
+    adminChangeStatusScope({ opts }) {
-      return store.rootState.api.backendInteractor.adminChangeStatusScope({
+      return window.vuex.state.api.backendInteractor.adminChangeStatusScope({
         opts,
       })
     },
-    adminDisableMFA(store, user) {
+    adminDisableMFA(user) {
-      return store.rootState.api.backendInteractor.adminDisableMFA({ user })
+      return window.vuex.state.api.backendInteractor.adminDisableMFA({ user })
     },
-    adminTagUser(store, { user, tag }) {
+    adminTagUser({ user, tag }) {
-      return store.rootState.api.backendInteractor.tagUser({ user, tag })
+      return window.vuex.state.api.backendInteractor.tagUser({ user, tag })
     },
-    adminUntagUser(store, { user, tag }) {
+    adminUntagUser({ user, tag }) {
-      return store.rootState.api.backendInteractor.untagUser({ user, tag })
+      return window.vuex.state.api.backendInteractor.untagUser({ user, tag })
     },
-    loadFrontendsStuff({ rootState, commit }) {
+    loadFrontendsStuff() {
-      rootState.api.backendInteractor
+      window.vuex.state.api.backendInteractor
         .fetchAvailableFrontends()
-        .then((frontends) => commit('setAvailableFrontends', { frontends }))
+        .then((frontends) => this.setAvailableFrontends({ frontends }))
     },
-    loadAdminStuff({ state, rootState, dispatch, commit }) {
+    loadAdminStuff() {
-      rootState.api.backendInteractor
+      window.vuex.state.api.backendInteractor
         .fetchInstanceDBConfig()
         .then((backendDbConfig) => {
           if (backendDbConfig.error) {
             if (backendDbConfig.error.status === 400) {
               backendDbConfig.error.json().then((errorJson) => {
                 if (/configurable_from_database/.test(errorJson.error)) {
-                  commit('setInstanceAdminNoDbConfig')
+                  this.setInstanceAdminNoDbConfig()
                 }
               })
             }
           } else {
-            dispatch('setInstanceAdminSettings', { backendDbConfig })
+            this.setInstanceAdminSettings({ backendDbConfig })
           }
         })
-      if (state.descriptions === null) {
+      if (this.descriptions === null) {
-        rootState.api.backendInteractor
+        window.vuex.state.api.backendInteractor
           .fetchInstanceConfigDescriptions()
           .then((backendDescriptions) =>
-            dispatch('setInstanceAdminDescriptions', { backendDescriptions }),
+            this.setInstanceAdminDescriptions({ backendDescriptions }),
           )
       }
     },
-    setInstanceAdminSettings({ state, commit }, { backendDbConfig }) {
+    setInstanceAdminSettings({ backendDbConfig }) {
-      const config = state.config || {}
+      const config = this.config || {}
       const modifiedPaths = new Set()
 
       backendDbConfig.configs.forEach((c) => {
@@ -257,10 +260,10 @@ const adminSettingsStorage = {
           },
         }
       }
-      commit('updateAdminSettings', { config, modifiedPaths })
+      this.updateAdminSettings({ config, modifiedPaths })
-      commit('resetAdminDraft')
+      this.resetAdminDraft()
     },
-    setInstanceAdminDescriptions({ commit }, { backendDescriptions }) {
+    setInstanceAdminDescriptions({ backendDescriptions }) {
       const convert = (
         { children, description, label, key = '<ROOT>', group, suggestions },
         path,
@@ -279,12 +282,12 @@ const adminSettingsStorage = {
       const descriptions = {}
 
       backendDescriptions.forEach((d) => convert(d, '', descriptions))
-      commit('updateAdminDescriptions', { descriptions })
+      this.updateAdminDescriptions({ descriptions })
     },
 
     // This action takes draft state, diffs it with live config state and then pushes
     // only differences between the two. Difference detection only work up to subkey (third) level.
-    pushAdminDraft({ rootState, state, dispatch }) {
+    pushAdminDraft() {
       // TODO cleanup paths in modifiedPaths
       const convert = (value) => {
         if (typeof value !== 'object') {
@@ -298,20 +301,20 @@ const adminSettingsStorage = {
 
       // Getting all group-keys used in config
       const allGroupKeys = flatten(
-        Object.entries(state.config).map(([group, lv1data]) =>
+        Object.entries(this.config).map(([group, lv1data]) =>
           Object.keys(lv1data).map((key) => ({ group, key })),
         ),
       )
 
       // Only using group-keys where there are changes detected
       const changedGroupKeys = allGroupKeys.filter(({ group, key }) => {
-        return !isEqual(state.config[group][key], state.draft[group][key])
+        return !isEqual(this.config[group][key], this.draft[group][key])
       })
 
       // Here we take all changed group-keys and get all changed subkeys
       const changed = changedGroupKeys.map(({ group, key }) => {
-        const config = state.config[group][key]
+        const config = this.config[group][key]
-        const draft = state.draft[group][key]
+        const draft = this.draft[group][key]
 
         // We convert group-key value into entries arrays
         const eConfig = Object.entries(config)
@@ -328,18 +331,20 @@ const adminSettingsStorage = {
         }
       })
 
-      rootState.api.backendInteractor
+      window.vuex.state.api.backendInteractor
         .pushInstanceDBConfig({
           payload: {
             configs: changed,
           },
         })
-        .then(() => rootState.api.backendInteractor.fetchInstanceDBConfig())
+        .then(() =>
+          window.vuex.state.api.backendInteractor.fetchInstanceDBConfig(),
+        )
         .then((backendDbConfig) =>
-          dispatch('setInstanceAdminSettings', { backendDbConfig }),
+          this.setInstanceAdminSettings({ backendDbConfig }),
         )
     },
-    pushAdminSetting({ rootState, dispatch }, { path, value }) {
+    pushAdminSetting({ path, value }) {
       const [group, key, ...rest] = Array.isArray(path)
         ? path
         : path.split(/\./g)
@@ -357,7 +362,7 @@ const adminSettingsStorage = {
         }
       }
 
-      rootState.api.backendInteractor
+      window.vuex.state.api.backendInteractor
         .pushInstanceDBConfig({
           payload: {
             configs: [
@@ -369,19 +374,21 @@ const adminSettingsStorage = {
             ],
           },
         })
-        .then(() => rootState.api.backendInteractor.fetchInstanceDBConfig())
+        .then(() =>
+          window.vuex.state.api.backendInteractor.fetchInstanceDBConfig(),
+        )
         .then((backendDbConfig) =>
-          dispatch('setInstanceAdminSettings', { backendDbConfig }),
+          this.setInstanceAdminSettings({ backendDbConfig }),
         )
     },
-    resetAdminSetting({ rootState, state, dispatch }, { path }) {
+    resetAdminSetting({ path }) {
       const [group, key, subkey] = Array.isArray(path)
         ? path
         : path.split(/\./g)
 
-      state.modifiedPaths.delete(path)
+      this.modifiedPaths.delete(path)
 
-      return rootState.api.backendInteractor
+      return window.vuex.state.api.backendInteractor
         .pushInstanceDBConfig({
           payload: {
             configs: [
@@ -394,12 +401,12 @@ const adminSettingsStorage = {
             ],
           },
         })
-        .then(() => rootState.api.backendInteractor.fetchInstanceDBConfig())
+        .then(() =>
+          window.vuex.state.api.backendInteractor.fetchInstanceDBConfig(),
+        )
         .then((backendDbConfig) =>
-          dispatch('setInstanceAdminSettings', { backendDbConfig }),
+          this.setInstanceAdminSettings({ backendDbConfig }),
         )
     },
   },
-}
+})
-
-export default adminSettingsStorage