refs #3301 Rewrite Preferences/Network with composition API

src/renderer/components/Preferences/Network.vue

@@ -40,76 +40,70 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script lang="ts">
+import { defineComponent, computed, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useI18next } from 'vue3-i18next'
+import { useStore } from '@/store'
+import { ACTION_TYPES } from '@/store/Preferences/Network'
 
-export default {
+export default defineComponent({
   name: 'network',
-  computed: {
-    ...mapGetters('Preferences/Network', ['manualProxyConfiguration']),
-    source: {
-      get() {
-        return this.$store.state.Preferences.Network.source
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/Network/changeSource', value)
-      }
-    },
-    proxyProtocol: {
-      get() {
-        return this.$store.state.Preferences.Network.proxy.protocol
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/Network/updateProtocol', value)
-      }
-    },
-    proxyHost: {
-      get() {
-        return this.$store.state.Preferences.Network.proxy.host
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/Network/updateHost', value)
-      }
-    },
-    proxyPort: {
-      get() {
-        return this.$store.state.Preferences.Network.proxy.port
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/Network/updatePort', value)
-      }
-    },
-    proxyUsername: {
-      get() {
-        return this.$store.state.Preferences.Network.proxy.username
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/Network/updateUsername', value)
-      }
-    },
-    proxyPassword: {
-      get() {
-        return this.$store.state.Preferences.Network.proxy.password
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/Network/updatePassword', value)
-      }
-    }
-  },
-  created() {
-    this.$store.dispatch('Preferences/Network/loadProxy').catch(() => {
-      this.$message({
-        message: this.$t('message.preferences_load_error'),
-        type: 'error'
+  setup() {
+    const space = 'Preferences/Network'
+    const store = useStore()
+    const i18n = useI18next()
+
+    const manualProxyConfiguration = computed(() => store.getters[`${space}/manualProxyConfiguration`])
+    const source = computed({
+      get: () => store.state.Preferences.Network.source,
+      set: value => store.dispatch(`${space}/${ACTION_TYPES.CHANGE_SOURCE}`, value)
+    })
+    const proxyProtocol = computed({
+      get: () => store.state.Preferences.Network.proxy.protocol,
+      set: value => store.dispatch(`${space}/${ACTION_TYPES.UPDATE_PROTOCOL}`, value)
+    })
+    const proxyHost = computed({
+      get: () => store.state.Preferences.Network.proxy.host,
+      set: value => store.dispatch(`${space}/${ACTION_TYPES.UPDATE_HOST}`, value)
+    })
+    const proxyPort = computed({
+      get: () => store.state.Preferences.Network.proxy.port,
+      set: value => store.dispatch(`${space}/${ACTION_TYPES.UPDATE_PORT}`, value)
+    })
+    const proxyUsername = computed({
+      get: () => store.state.Preferences.Network.proxy.username,
+      set: value => store.dispatch(`${space}/${ACTION_TYPES.UPDATE_USERNAME}`, value)
+    })
+    const proxyPassword = computed({
+      get: () => store.state.Preferences.Network.proxy.password,
+      set: value => store.dispatch(`${space}/${ACTION_TYPES.UPDATE_PASSWORD}`, value)
+    })
+
+    onMounted(() => {
+      store.dispatch(`${space}/${ACTION_TYPES.LOAD_PROXY}`).catch(() => {
+        ElMessage({
+          message: i18n.t('message.preferences_load_error'),
+          type: 'error'
+        })
       })
     })
-  },
-  methods: {
-    onSave() {
-      this.$store.dispatch('Preferences/Network/saveProxyConfig')
+
+    const onSave = () => store.dispatch(`${space}/${ACTION_TYPES.SAVE_PROXY_CONFIG}`)
+
+    return {
+      manualProxyConfiguration,
+      source,
+      proxyProtocol,
+      proxyHost,
+      proxyPort,
+      proxyUsername,
+      proxyPassword,
+      onSave
     }
-  }
-}
+  },
+  methods: {}
+})
 </script>
 
 <style lang="scss" scoped>

src/renderer/store/Preferences/Network.ts

@@ -4,7 +4,7 @@ import { BaseConfig } from '~/src/types/preference'
 import { Proxy, ProxySource, ProxyProtocol, ManualProxy } from '~/src/types/proxy'
 import { MyWindow } from '~/src/types/global'
 
-const win = (window as any) as MyWindow
+const win = window as any as MyWindow
 
 export type NetworkState = {
   source: ProxySource
@@ -91,31 +91,42 @@ const mutations: MutationTree<NetworkState> = {
   }
 }
 
+export const ACTION_TYPES = {
+  LOAD_PROXY: 'loadProxy',
+  CHANGE_SOURCE: 'changeSource',
+  UPDATE_PROTOCOL: 'updateProtocol',
+  UPDATE_HOST: 'updateHost',
+  UPDATE_PORT: 'updatePort',
+  UPDATE_USERNAME: 'updateUsername',
+  UPDATE_PASSWORD: 'updatePassword',
+  SAVE_PROXY_CONFIG: 'saveProxyConfig'
+}
+
 const actions: ActionTree<NetworkState, RootState> = {
-  loadProxy: async ({ commit }) => {
+  [ACTION_TYPES.LOAD_PROXY]: async ({ commit }) => {
     const conf: BaseConfig = await win.ipcRenderer.invoke('get-preferences')
     commit(MUTATION_TYPES.UPDATE_PROXY, conf.proxy as Proxy)
     return conf
   },
-  changeSource: ({ commit }, source: string) => {
+  [ACTION_TYPES.CHANGE_SOURCE]: ({ commit }, source: string) => {
     commit(MUTATION_TYPES.CHANGE_SOURCE, source)
   },
-  updateProtocol: ({ commit }, protocol: string) => {
+  [ACTION_TYPES.UPDATE_PROTOCOL]: ({ commit }, protocol: string) => {
     commit(MUTATION_TYPES.UPDATE_PROTOCOL, protocol)
   },
-  updateHost: ({ commit }, host: string) => {
+  [ACTION_TYPES.UPDATE_HOST]: ({ commit }, host: string) => {
     commit(MUTATION_TYPES.UPDATE_HOST, host)
   },
-  updatePort: ({ commit }, port: string) => {
+  [ACTION_TYPES.UPDATE_PORT]: ({ commit }, port: string) => {
     commit(MUTATION_TYPES.UPDATE_PORT, port)
   },
-  updateUsername: ({ commit }, username: string) => {
+  [ACTION_TYPES.UPDATE_USERNAME]: ({ commit }, username: string) => {
     commit(MUTATION_TYPES.UPDATE_USERNAME, username)
   },
-  updatePassword: ({ commit }, password: string) => {
+  [ACTION_TYPES.UPDATE_PASSWORD]: ({ commit }, password: string) => {
     commit(MUTATION_TYPES.UPDATE_PASSWORD, password)
   },
-  saveProxyConfig: async ({ state }) => {
+  [ACTION_TYPES.SAVE_PROXY_CONFIG]: async ({ state }) => {
     const proxy: Proxy = {
       source: state.source,
       manualProxyConfig: state.proxy