refs #3301 Rewrite Preferences/Appearance with composition API

src/renderer/components/Preferences/Appearance.vue

@@ -48,82 +48,79 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
-import { mapState } from 'vuex'
+import { defineComponent, computed, onMounted } from 'vue'
-import Toot from './Appearance/Toot'
+import { useStore } from '@/store'
-import ColorPallet from './Appearance/ColorPallet'
+import Toot from './Appearance/Toot.vue'
+import ColorPallet from './Appearance/ColorPallet.vue'
 import DisplayStyle from '~/src/constants/displayStyle'
 import Theme from '~/src/constants/theme'
 import TimeFormat from '~/src/constants/timeFormat'
+import { ACTION_TYPES } from '@/store/Preferences/Appearance'
 
-export default {
+export default defineComponent({
   name: 'appearance',
   components: {
     Toot,
     ColorPallet
   },
-  data() {
+  setup() {
+    const space = 'Preferences/Appearance'
+    const store = useStore()
+
+    const nameStyles = [DisplayStyle.DisplayNameAndUsername, DisplayStyle.DisplayName, DisplayStyle.Username]
+    const themes = [Theme.System, Theme.Light, Theme.Dark, Theme.SolarizedLight, Theme.SolarizedDark, Theme.KimbieDark, Theme.Custom]
+    const timeFormats = [TimeFormat.Absolute, TimeFormat.Relative]
+
+    const fontSize = computed(() => store.state.Preferences.Appearance.appearance.fontSize)
+    const fontList = computed(() => store.state.Preferences.Appearance.fonts)
+    const tootPadding = computed(() => store.state.Preferences.Appearance.appearance.tootPadding)
+    const theme = computed({
+      get: () => store.state.Preferences.Appearance.appearance.theme,
+      set: value => store.dispatch(`${space}/${ACTION_TYPES.UPDATE_THEME}`, value)
+    })
+    const displayNameStyle = computed({
+      get: () => store.state.Preferences.Appearance.appearance.displayNameStyle,
+      set: value => store.dispatch(`${space}/${ACTION_TYPES.UPDATE_DISPLAY_NAME_STYLE}`, value)
+    })
+    const timeFormat = computed({
+      get: () => store.state.Preferences.Appearance.appearance.timeFormat,
+      set: value => store.dispatch(`${space}/${ACTION_TYPES.UPDATE_TIME_FORMAT}`, value)
+    })
+    const customizeThemeColor = computed(() => theme.value === Theme.Custom.key)
+    const font = computed({
+      get: () => store.state.Preferences.Appearance.appearance.font,
+      set: value => store.dispatch(`${space}/${ACTION_TYPES.UPDATE_FONT}`, value)
+    })
+
+    onMounted(() => {
+      store.dispatch(`${space}/${ACTION_TYPES.LOAD_APPEARANCE}`)
+      store.dispatch(`${space}/${ACTION_TYPES.LOAD_FONTS}`)
+    })
+
+    const updateFontSize = async (value: number) => {
+      await store.dispatch(`${space}/${ACTION_TYPES.UPDATE_FONT_SIZE}`, value)
+    }
+    const updateTootPadding = async (value: number) => {
+      store.dispatch(`${space}/${ACTION_TYPES.UPDATE_TOOT_PADDING}`, value)
+    }
     return {
-      nameStyles: [DisplayStyle.DisplayNameAndUsername, DisplayStyle.DisplayName, DisplayStyle.Username],
+      nameStyles,
-      themes: [Theme.System, Theme.Light, Theme.Dark, Theme.SolarizedLight, Theme.SolarizedDark, Theme.KimbieDark, Theme.Custom],
+      themes,
-      timeFormats: [TimeFormat.Absolute, TimeFormat.Relative]
+      timeFormats,
-    }
+      fontSize,
-  },
+      fontList,
-  computed: {
+      tootPadding,
-    ...mapState('Preferences/Appearance', {
+      theme,
-      fontSize: state => state.appearance.fontSize,
+      displayNameStyle,
-      fontList: state => state.fonts,
+      timeFormat,
-      tootPadding: state => state.appearance.tootPadding
+      customizeThemeColor,
-    }),
+      font,
-    theme: {
+      updateFontSize,
-      get() {
+      updateTootPadding
-        return this.$store.state.Preferences.Appearance.appearance.theme
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/Appearance/updateTheme', value)
-      }
-    },
-    displayNameStyle: {
-      get() {
-        return this.$store.state.Preferences.Appearance.appearance.displayNameStyle
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/Appearance/updateDisplayNameStyle', value)
-      }
-    },
-    timeFormat: {
-      get() {
-        return this.$store.state.Preferences.Appearance.appearance.timeFormat
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/Appearance/updateTimeFormat', value)
-      }
-    },
-    customizeThemeColor() {
-      return this.theme === Theme.Custom.key
-    },
-    font: {
-      get() {
-        return this.$store.state.Preferences.Appearance.appearance.font
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/Appearance/updateFont', value)
-      }
-    }
-  },
-  created() {
-    this.$store.dispatch('Preferences/Appearance/loadAppearance')
-    this.$store.dispatch('Preferences/Appearance/loadFonts')
-  },
-  methods: {
-    async updateFontSize(value) {
-      await this.$store.dispatch('Preferences/Appearance/updateFontSize', value)
-    },
-    async updateTootPadding(value) {
-      await this.$store.dispatch('Preferences/Appearance/updateTootPadding', value)
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/renderer/components/Preferences/Appearance/Toot.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="status" tabIndex="0" ref="status">
+  <div class="status" tabIndex="0" ref="statusRef">
     <div class="toot">
       <div class="icon">
         <img :src="sampleIcon" />

src/renderer/store/Preferences/Appearance.ts

@@ -79,7 +79,7 @@ const actions: ActionTree<AppearanceState, RootState> = {
     dispatch('App/loadPreferences', null, { root: true })
   },
   [ACTION_TYPES.UPDATE_FONT_SIZE]: async ({ dispatch, commit, state }, fontSize: number) => {
-    const newAppearance: Appearance = Object.assign({}, state.appearance, {
+    const newAppearance: Appearance = Object.assign({}, toRaw(state.appearance), {
       fontSize: fontSize
     })
     const config = {
@@ -90,7 +90,7 @@ const actions: ActionTree<AppearanceState, RootState> = {
     dispatch('App/loadPreferences', null, { root: true })
   },
   [ACTION_TYPES.UPDATE_DISPLAY_NAME_STYLE]: async ({ dispatch, commit, state }, value: number) => {
-    const newAppearance: Appearance = Object.assign({}, state.appearance, {
+    const newAppearance: Appearance = Object.assign({}, toRaw(state.appearance), {
       displayNameStyle: value
     })
     const config = {
@@ -101,7 +101,7 @@ const actions: ActionTree<AppearanceState, RootState> = {
     commit(MUTATION_TYPES.UPDATE_APPEARANCE, conf.appearance)
   },
   [ACTION_TYPES.UPDATE_TIME_FORMAT]: async ({ dispatch, commit, state }, value: number) => {
-    const newAppearance: Appearance = Object.assign({}, state.appearance, {
+    const newAppearance: Appearance = Object.assign({}, toRaw(state.appearance), {
       timeFormat: value
     })
     const config = {
@@ -124,7 +124,7 @@ const actions: ActionTree<AppearanceState, RootState> = {
     dispatch('App/loadPreferences', null, { root: true })
   },
   [ACTION_TYPES.UPDATE_FONT]: async ({ dispatch, state, commit }, value: string) => {
-    const newAppearance: Appearance = Object.assign({}, state.appearance, {
+    const newAppearance: Appearance = Object.assign({}, toRaw(state.appearance), {
       font: value
     })
     const config = {
@@ -135,7 +135,7 @@ const actions: ActionTree<AppearanceState, RootState> = {
     dispatch('App/loadPreferences', null, { root: true })
   },
   [ACTION_TYPES.UPDATE_TOOT_PADDING]: async ({ dispatch, state, commit }, value: number) => {
-    const newAppearance: Appearance = Object.assign({}, state.appearance, {
+    const newAppearance: Appearance = Object.assign({}, toRaw(state.appearance), {
       tootPadding: value
     })
     const config = {