feat: user DataExport script setup

src/views/user/settings/DataExport.vue

@@ -40,37 +40,41 @@
 
 <script lang="ts">
 import {defineComponent} from 'vue'
-import DataExportService from '@/services/dataExport'
 
 export default defineComponent({
 	name: 'user-settings-data-export',
-	data() {
+})
-		return {
+</script>
-			dataExportService: new DataExportService(),
+
-			password: '',
+<script setup lang="ts">
-			errPasswordRequired: false,
+import {ref, computed, shallowReactive} from 'vue'
-		}
+import {useStore} from 'vuex'
-	},
+import {useI18n} from 'vue-i18n'
-	computed: {
+
-		isLocalUser() {
+import DataExportService from '@/services/dataExport'
-			return this.$store.state.auth.info?.isLocalUser
+import { useTitle } from '@/composables/useTitle'
-		},
+import {success} from '@/message'
-	},
+
-	mounted() {
+const {t} = useI18n()
-		this.setTitle(`${this.$t('user.export.title')} - ${this.$t('user.settings.title')}`)
+const store = useStore()
-	},
+
-	methods: {
+useTitle(() => `${t('user.export.title')} - ${t('user.settings.title')}`)
-		async requestDataExport() {
+
-			if (this.password === '' && this.isLocalUser) {
+const dataExportService = shallowReactive(new DataExportService())
-				this.errPasswordRequired = true
+const password = ref('')
-				this.$refs.passwordInput.focus()
+const errPasswordRequired = ref(false)
+const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
+const passwordInput = ref()
+
+async function requestDataExport() {
+	if (password.value === '' && isLocalUser.value) {
+		errPasswordRequired.value = true
+		passwordInput.value.focus()
 		return
 	}
 
-			await this.dataExportService.request(this.password)
+	await dataExportService.request(password.value)
-			this.$message.success({message: this.$t('user.export.success')})
+	success({message: t('user.export.success')})
-			this.password = ''
+	password.value = ''
-		},
+}
-	},
-})
 </script>