src/stores/config.ts

@@ -1,3 +1,4 @@
+import {computed, reactive, toRefs} from 'vue'
 import {defineStore, acceptHMRUpdate} from 'pinia'
 import {parseURL} from 'ufo'
 
@@ -36,8 +37,8 @@ export interface ConfigState {
 	},
 }
 
-export const useConfigStore = defineStore('config', {
+export const useConfigStore = defineStore('config', () => {
-	state: (): ConfigState => ({
+	const state = reactive({
 		// These are the api defaults.
 		version: '',
 		frontendUrl: '',
@@ -66,25 +67,33 @@ export const useConfigStore = defineStore('config', {
 				providers: [],
 			},
 		},
-	}),
+	})
-	getters: {
+
-		migratorsEnabled: (state) => state.availableMigrators?.length > 0,
+	const migratorsEnabled = computed(() => state.availableMigrators?.length > 0)
-		apiBase() {
+	const apiBase = computed(() => {
-			const {host, protocol} = parseURL(window.API_URL)
+		const {host, protocol} = parseURL(window.API_URL)
-			return protocol + '//' + host
+		return protocol + '//' + host
-		},
+	})
-	},
+
-	actions: {
+	function setConfig(config: ConfigState) {
-		setConfig(config: ConfigState) {
+		Object.assign(state, config)
-			Object.assign(this, config)
+	}
-		},
+	async function update() {
-		async update() {
+		const HTTP = HTTPFactory()
-			const HTTP = HTTPFactory()
+		const {data: config} = await HTTP.get('info')
-			const {data: config} = await HTTP.get('info')
+		setConfig(objectToCamelCase(config))
-			this.setConfig(objectToCamelCase(config))
+		return config
-			return config
+	}
-		},
+
-	},
+	return {
+		...toRefs(state),
+
+		migratorsEnabled,
+		apiBase,
+		setConfig,
+		update,
+	}
+
 })
 
 // support hot reloading