refs #3301 Rewrite Preferences/Network with composition API
This commit is contained in:
parent
d30d7eaf22
commit
f7e1cfed7e
|
@ -40,76 +40,70 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { mapGetters } from 'vuex'
|
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',
|
name: 'network',
|
||||||
computed: {
|
setup() {
|
||||||
...mapGetters('Preferences/Network', ['manualProxyConfiguration']),
|
const space = 'Preferences/Network'
|
||||||
source: {
|
const store = useStore()
|
||||||
get() {
|
const i18n = useI18next()
|
||||||
return this.$store.state.Preferences.Network.source
|
|
||||||
},
|
const manualProxyConfiguration = computed(() => store.getters[`${space}/manualProxyConfiguration`])
|
||||||
set(value) {
|
const source = computed({
|
||||||
this.$store.dispatch('Preferences/Network/changeSource', value)
|
get: () => store.state.Preferences.Network.source,
|
||||||
}
|
set: value => store.dispatch(`${space}/${ACTION_TYPES.CHANGE_SOURCE}`, value)
|
||||||
},
|
})
|
||||||
proxyProtocol: {
|
const proxyProtocol = computed({
|
||||||
get() {
|
get: () => store.state.Preferences.Network.proxy.protocol,
|
||||||
return this.$store.state.Preferences.Network.proxy.protocol
|
set: value => store.dispatch(`${space}/${ACTION_TYPES.UPDATE_PROTOCOL}`, value)
|
||||||
},
|
})
|
||||||
set(value) {
|
const proxyHost = computed({
|
||||||
this.$store.dispatch('Preferences/Network/updateProtocol', value)
|
get: () => store.state.Preferences.Network.proxy.host,
|
||||||
}
|
set: value => store.dispatch(`${space}/${ACTION_TYPES.UPDATE_HOST}`, value)
|
||||||
},
|
})
|
||||||
proxyHost: {
|
const proxyPort = computed({
|
||||||
get() {
|
get: () => store.state.Preferences.Network.proxy.port,
|
||||||
return this.$store.state.Preferences.Network.proxy.host
|
set: value => store.dispatch(`${space}/${ACTION_TYPES.UPDATE_PORT}`, value)
|
||||||
},
|
})
|
||||||
set(value) {
|
const proxyUsername = computed({
|
||||||
this.$store.dispatch('Preferences/Network/updateHost', value)
|
get: () => store.state.Preferences.Network.proxy.username,
|
||||||
}
|
set: value => store.dispatch(`${space}/${ACTION_TYPES.UPDATE_USERNAME}`, value)
|
||||||
},
|
})
|
||||||
proxyPort: {
|
const proxyPassword = computed({
|
||||||
get() {
|
get: () => store.state.Preferences.Network.proxy.password,
|
||||||
return this.$store.state.Preferences.Network.proxy.port
|
set: value => store.dispatch(`${space}/${ACTION_TYPES.UPDATE_PASSWORD}`, value)
|
||||||
},
|
})
|
||||||
set(value) {
|
|
||||||
this.$store.dispatch('Preferences/Network/updatePort', value)
|
onMounted(() => {
|
||||||
}
|
store.dispatch(`${space}/${ACTION_TYPES.LOAD_PROXY}`).catch(() => {
|
||||||
},
|
ElMessage({
|
||||||
proxyUsername: {
|
message: i18n.t('message.preferences_load_error'),
|
||||||
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'
|
type: 'error'
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
const onSave = () => store.dispatch(`${space}/${ACTION_TYPES.SAVE_PROXY_CONFIG}`)
|
||||||
|
|
||||||
|
return {
|
||||||
|
manualProxyConfiguration,
|
||||||
|
source,
|
||||||
|
proxyProtocol,
|
||||||
|
proxyHost,
|
||||||
|
proxyPort,
|
||||||
|
proxyUsername,
|
||||||
|
proxyPassword,
|
||||||
|
onSave
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {}
|
||||||
onSave() {
|
})
|
||||||
this.$store.dispatch('Preferences/Network/saveProxyConfig')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
@ -4,7 +4,7 @@ import { BaseConfig } from '~/src/types/preference'
|
||||||
import { Proxy, ProxySource, ProxyProtocol, ManualProxy } from '~/src/types/proxy'
|
import { Proxy, ProxySource, ProxyProtocol, ManualProxy } from '~/src/types/proxy'
|
||||||
import { MyWindow } from '~/src/types/global'
|
import { MyWindow } from '~/src/types/global'
|
||||||
|
|
||||||
const win = (window as any) as MyWindow
|
const win = window as any as MyWindow
|
||||||
|
|
||||||
export type NetworkState = {
|
export type NetworkState = {
|
||||||
source: ProxySource
|
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> = {
|
const actions: ActionTree<NetworkState, RootState> = {
|
||||||
loadProxy: async ({ commit }) => {
|
[ACTION_TYPES.LOAD_PROXY]: async ({ commit }) => {
|
||||||
const conf: BaseConfig = await win.ipcRenderer.invoke('get-preferences')
|
const conf: BaseConfig = await win.ipcRenderer.invoke('get-preferences')
|
||||||
commit(MUTATION_TYPES.UPDATE_PROXY, conf.proxy as Proxy)
|
commit(MUTATION_TYPES.UPDATE_PROXY, conf.proxy as Proxy)
|
||||||
return conf
|
return conf
|
||||||
},
|
},
|
||||||
changeSource: ({ commit }, source: string) => {
|
[ACTION_TYPES.CHANGE_SOURCE]: ({ commit }, source: string) => {
|
||||||
commit(MUTATION_TYPES.CHANGE_SOURCE, source)
|
commit(MUTATION_TYPES.CHANGE_SOURCE, source)
|
||||||
},
|
},
|
||||||
updateProtocol: ({ commit }, protocol: string) => {
|
[ACTION_TYPES.UPDATE_PROTOCOL]: ({ commit }, protocol: string) => {
|
||||||
commit(MUTATION_TYPES.UPDATE_PROTOCOL, protocol)
|
commit(MUTATION_TYPES.UPDATE_PROTOCOL, protocol)
|
||||||
},
|
},
|
||||||
updateHost: ({ commit }, host: string) => {
|
[ACTION_TYPES.UPDATE_HOST]: ({ commit }, host: string) => {
|
||||||
commit(MUTATION_TYPES.UPDATE_HOST, host)
|
commit(MUTATION_TYPES.UPDATE_HOST, host)
|
||||||
},
|
},
|
||||||
updatePort: ({ commit }, port: string) => {
|
[ACTION_TYPES.UPDATE_PORT]: ({ commit }, port: string) => {
|
||||||
commit(MUTATION_TYPES.UPDATE_PORT, port)
|
commit(MUTATION_TYPES.UPDATE_PORT, port)
|
||||||
},
|
},
|
||||||
updateUsername: ({ commit }, username: string) => {
|
[ACTION_TYPES.UPDATE_USERNAME]: ({ commit }, username: string) => {
|
||||||
commit(MUTATION_TYPES.UPDATE_USERNAME, username)
|
commit(MUTATION_TYPES.UPDATE_USERNAME, username)
|
||||||
},
|
},
|
||||||
updatePassword: ({ commit }, password: string) => {
|
[ACTION_TYPES.UPDATE_PASSWORD]: ({ commit }, password: string) => {
|
||||||
commit(MUTATION_TYPES.UPDATE_PASSWORD, password)
|
commit(MUTATION_TYPES.UPDATE_PASSWORD, password)
|
||||||
},
|
},
|
||||||
saveProxyConfig: async ({ state }) => {
|
[ACTION_TYPES.SAVE_PROXY_CONFIG]: async ({ state }) => {
|
||||||
const proxy: Proxy = {
|
const proxy: Proxy = {
|
||||||
source: state.source,
|
source: state.source,
|
||||||
manualProxyConfig: state.proxy
|
manualProxyConfig: state.proxy
|
||||||
|
|
Loading…
Reference in New Issue