feat: port base store to pinia

src/views/user/Login.vue

@@ -68,7 +68,7 @@
 
 			<x-button
 				@click="submit"
-				:loading="loading"
+				:loading="isLoading"
 				tabindex="4"
 			>
 				{{ $t('user.auth.login') }}
@@ -104,17 +104,17 @@
 <script lang="ts">
 import {defineComponent} from 'vue'
 import {useDebounceFn} from '@vueuse/core'
-import {mapState as mapStateVuex} from 'vuex'
 import {mapState} from 'pinia'
 
 import {HTTPFactory} from '@/http-common'
-import {LOADING} from '@/store/mutation-types'
 import {getErrorText} from '@/message'
 import Message from '@/components/misc/message.vue'
 import {redirectToProvider} from '../../helpers/redirectToProvider'
 import {getLastVisited, clearLastVisited} from '../../helpers/saveLastVisited'
 import Password from '@/components/input/password.vue'
-import { setTitle } from '@/helpers/setTitle'
+import {setTitle} from '@/helpers/setTitle'
+
+import {useBaseStore} from '@/stores/base'
 import {useConfigStore} from '@/stores/config'
 import {useAuthStore} from '@/stores/auth'
 
@@ -172,8 +172,8 @@ export default defineComponent({
 		hasOpenIdProviders() {
 			return this.openidConnect.enabled && this.openidConnect.providers?.length > 0
 		},
-		...mapStateVuex({
-			loading: LOADING,
+		...mapState(useBaseStore, {
+			isLoading: state => state.loading,
 		}),
 
 		...mapState(useAuthStore, {
@@ -197,11 +197,11 @@ export default defineComponent({
 	methods: {
 		setLoading() {
 			const timeout = setTimeout(() => {
-				this.loading = true
+				this.isLoading = true
 			}, 100)
 			return () => {
 				clearTimeout(timeout)
-				this.loading = false
+				this.isLoading = false
 			}
 		},
 

src/views/user/OpenIdAuth.vue

@@ -15,13 +15,14 @@ export default { name: 'Auth' }
 
 <script setup lang="ts">
 import {ref, computed, onMounted} from 'vue'
-import {useStore} from '@/store'
 import {useRoute, useRouter} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 
 import {getErrorText} from '@/message'
 import Message from '@/components/misc/message.vue'
 import {clearLastVisited, getLastVisited} from '@/helpers/saveLastVisited'
+
+import {useBaseStore} from '@/stores/base'
 import {useAuthStore} from '@/stores/auth'
 
 const {t} = useI18n({useScope: 'global'})
@@ -29,10 +30,10 @@ const {t} = useI18n({useScope: 'global'})
 const router = useRouter()
 const route = useRoute()
 
-const store = useStore()
+const baseStore = useBaseStore()
 const authStore = useAuthStore()
 
-const loading = computed(() => store.state.loading)
+const loading = computed(() => baseStore.loading)
 const errorMessage = ref('')
 
 async function authenticateWithCode() {

src/views/user/Register.vue

@@ -50,7 +50,7 @@
 			</div>
 
 			<x-button
-				:loading="loading"
+				:loading="isLoading"
 				id="register-submit"
 				@click="submit"
 				class="mr-2"
@@ -73,12 +73,14 @@ import {useDebounceFn} from '@vueuse/core'
 import {ref, reactive, toRaw, computed, onBeforeMount} from 'vue'
 
 import router from '@/router'
-import {store} from '@/store'
 import Message from '@/components/misc/message.vue'
 import {isEmail} from '@/helpers/isEmail'
 import Password from '@/components/input/password.vue'
+
+import {useBaseStore} from '@/stores/base'
 import {useAuthStore} from '@/stores/auth'
 
+const baseStore = useBaseStore()
 const authStore = useAuthStore()
 
 // FIXME: use the `beforeEnter` hook of vue-router
@@ -95,7 +97,7 @@ const credentials = reactive({
 	password: '',
 })
 
-const loading = computed(() => store.state.loading)
+const isLoading = computed(() => baseStore.loading)
 const errorMessage = ref('')
 const validatePasswordInitially = ref(false)
 

src/views/user/settings/General.vue

@@ -159,7 +159,6 @@ export default defineComponent({
 <script setup lang="ts">
 import {computed, watch, ref} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useStore} from '@/store'
 
 import {PrefixMode} from '@/modules/parseTaskText'
 
@@ -172,6 +171,8 @@ import {createRandomID} from '@/helpers/randomId'
 import {success} from '@/message'
 import {AuthenticatedHTTPFactory} from '@/http-common'
 
+import {useBaseStore} from '@/stores/base'
+
 import {useColorScheme} from '@/composables/useColorScheme'
 import {useTitle} from '@/composables/useTitle'
 import {objectIsEmpty} from '@/helpers/objectIsEmpty'
@@ -227,7 +228,7 @@ function getPlaySoundWhenDoneSetting() {
 const playSoundWhenDone = ref(getPlaySoundWhenDoneSetting())
 const quickAddMagicMode = ref(getQuickAddMagicMode())
 
-const store = useStore()
+const baseStore = useBaseStore()
 const authStore = useAuthStore()
 const settings = ref({...authStore.settings})
 const id = ref(createRandomID())
@@ -256,7 +257,7 @@ const defaultList = computed({
 		settings.value.defaultListId = l ? l.id : DEFAULT_LIST_ID
 	},
 })
-const loading = computed(() => store.state.loading && store.state.loadingModule === 'general-settings')
+const loading = computed(() => baseStore.loading && baseStore.loadingModule === 'general-settings')
 
 watch(
 	playSoundWhenDone,