refs #3301 Rewrite App with composition API
This commit is contained in:
parent
69265bbd10
commit
e679f0e602
|
@ -13,7 +13,7 @@ const { VueLoaderPlugin } = require('vue-loader')
|
||||||
|
|
||||||
let rendererConfig = {
|
let rendererConfig = {
|
||||||
entry: {
|
entry: {
|
||||||
renderer: path.join(__dirname, '../src/renderer/main.js')
|
renderer: path.join(__dirname, '../src/renderer/main.ts')
|
||||||
},
|
},
|
||||||
module: {
|
module: {
|
||||||
rules: [
|
rules: [
|
||||||
|
|
|
@ -4,43 +4,51 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { mapState } from 'vuex'
|
import { defineComponent, computed, onMounted, onUnmounted } from 'vue'
|
||||||
|
import { useI18next } from 'vue3-i18next'
|
||||||
|
import { useStore } from '@/store'
|
||||||
|
import { ACTION_TYPES } from '@/store/App'
|
||||||
|
|
||||||
export default {
|
export default defineComponent({
|
||||||
name: 'Whalebird',
|
name: 'Whalebird',
|
||||||
computed: {
|
setup() {
|
||||||
...mapState({
|
const space = 'App'
|
||||||
theme: state => {
|
const store = useStore()
|
||||||
return {
|
const i18n = useI18next()
|
||||||
'--theme-background-color': state.App.theme.background_color,
|
|
||||||
'--theme-selected-background-color': state.App.theme.selected_background_color,
|
const theme = computed(() => ({
|
||||||
'--theme-global-header-color': state.App.theme.global_header_color,
|
'--theme-background-color': store.state.App.theme.background_color,
|
||||||
'--theme-side-menu-color': state.App.theme.side_menu_color,
|
'--theme-selected-background-color': store.state.App.theme.selected_background_color,
|
||||||
'--theme-primary-color': state.App.theme.primary_color,
|
'--theme-global-header-color': store.state.App.theme.global_header_color,
|
||||||
'--theme-regular-color': state.App.theme.regular_color,
|
'--theme-side-menu-color': store.state.App.theme.side_menu_color,
|
||||||
'--theme-secondary-color': state.App.theme.secondary_color,
|
'--theme-primary-color': store.state.App.theme.primary_color,
|
||||||
'--theme-border-color': state.App.theme.border_color,
|
'--theme-regular-color': store.state.App.theme.regular_color,
|
||||||
'--theme-header-menu-color': state.App.theme.header_menu_color,
|
'--theme-secondary-color': store.state.App.theme.secondary_color,
|
||||||
'--theme-wrapper-mask-color': state.App.theme.wrapper_mask_color,
|
'--theme-border-color': store.state.App.theme.border_color,
|
||||||
'--theme-scrollbar-color': state.App.theme.scrollbar_color,
|
'--theme-header-menu-color': store.state.App.theme.header_menu_color,
|
||||||
'--toot-padding': `${state.App.tootPadding}px`,
|
'--theme-wrapper-mask-color': store.state.App.theme.wrapper_mask_color,
|
||||||
'--base-font-size': `${state.App.fontSize}px`,
|
'--theme-scrollbar-color': store.state.App.theme.scrollbar_color,
|
||||||
'--specified-fonts': state.App.defaultFonts.join(', ')
|
'--toot-padding': `${store.state.App.tootPadding}px`,
|
||||||
}
|
'--base-font-size': `${store.state.App.fontSize}px`,
|
||||||
}
|
'--specified-fonts': store.state.App.defaultFonts.join(', ')
|
||||||
|
}))
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
store.dispatch(`${space}/${ACTION_TYPES.WATCH_SHORTCUT_EVENTS}`)
|
||||||
|
store.dispatch(`${space}/${ACTION_TYPES.LOAD_PREFERENCES}`).then(conf => {
|
||||||
|
i18n.changeLanguage(conf.language.language)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
},
|
onUnmounted(() => {
|
||||||
created() {
|
store.dispatch(`${space}/${ACTION_TYPES.REMOVE_SHORTCUT_EVENTS}`)
|
||||||
this.$store.dispatch('App/watchShortcutEvents')
|
|
||||||
this.$store.dispatch('App/loadPreferences').then(conf => {
|
|
||||||
this.$i18n.changeLanguage(conf.language.language)
|
|
||||||
})
|
})
|
||||||
},
|
|
||||||
unmounted() {
|
return {
|
||||||
this.$store.dispatch('App/removeShortcutsEvents')
|
theme
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
Loading…
Reference in New Issue