refs #3301 Rewrite Preferences/General with composition API

src/renderer/components/Preferences/General.vue

@@ -40,104 +40,103 @@
   </div>
 </template>
 
-<script>
-import { mapState, 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/General'
 
-export default {
+export default defineComponent({
   name: 'general',
-  computed: {
-    ...mapState('Preferences/General', {
-      loading: state => state.loading
-    }),
-    ...mapState({
-      backgroundColor: state => state.App.theme.background_color
-    }),
-    ...mapGetters('Preferences/General', ['notDarwin']),
-    sound_fav_rb: {
-      get() {
-        return this.$store.state.Preferences.General.general.sound.fav_rb
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/General/updateSound', {
+  setup() {
+    const space = 'Preferences/General'
+    const store = useStore()
+    const i18n = useI18next()
+
+    const loading = computed(() => store.state.Preferences.General.loading)
+    const backgroundColor = computed(() => store.state.App.theme.background_color)
+    const notDarwin = computed(() => store.getters[`${space}/notDarwin`])
+    const sound_fav_rb = computed({
+      get: () => store.state.Preferences.General.general.sound.fav_rb,
+      set: (value: boolean) =>
+        store.dispatch(`${space}/${ACTION_TYPES.UPDATE_SOUND}`, {
           fav_rb: value
         })
-      }
-    },
-    sound_toot: {
-      get() {
-        return this.$store.state.Preferences.General.general.sound.toot
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/General/updateSound', {
+    })
+    const sound_toot = computed({
+      get: () => store.state.Preferences.General.general.sound.toot,
+      set: (value: boolean) =>
+        store.dispatch(`${space}/${ACTION_TYPES.UPDATE_SOUND}`, {
           toot: value
         })
-      }
-    },
-    timeline_cw: {
-      get() {
-        return this.$store.state.Preferences.General.general.timeline.cw
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/General/updateTimeline', {
+    })
+    const timeline_cw = computed({
+      get: () => store.state.Preferences.General.general.timeline.cw,
+      set: (value: boolean) =>
+        store.dispatch('Preferences/General/updateTimeline', {
           cw: value
         })
-      }
-    },
-    timeline_nsfw: {
-      get() {
-        return this.$store.state.Preferences.General.general.timeline.nsfw
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/General/updateTimeline', {
+    })
+    const timeline_nsfw = computed({
+      get: () => store.state.Preferences.General.general.timeline.nsfw,
+      set: (value: boolean) =>
+        store.dispatch(`${space}/${ACTION_TYPES.UPDATE_TIMELINE}`, {
           nsfw: value
         })
-      }
-    },
-    timeline_hide_attachments: {
-      get() {
-        return this.$store.state.Preferences.General.general.timeline.hideAllAttachments
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/General/updateTimeline', {
+    })
+    const timeline_hide_attachments = computed({
+      get: () => store.state.Preferences.General.general.timeline.hideAllAttachments,
+      set: (value: boolean) =>
+        store.dispatch(`${space}/${ACTION_TYPES.UPDATE_TIMELINE}`, {
           hideAllAttachments: value
         })
-      }
-    },
-    other_launch: {
-      get() {
-        return this.$store.state.Preferences.General.general.other.launch
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/General/updateOther', {
+    })
+    const other_launch = computed({
+      get: () => store.state.Preferences.General.general.other.launch,
+      set: (value: boolean) =>
+        store.dispatch(`${space}/${ACTION_TYPES.UPDATE_OTHER}`, {
           launch: value
         })
-      }
-    }
-  },
-  created() {
-    this.$store.dispatch('Preferences/General/loadGeneral').catch(() => {
-      this.$message({
-        message: this.$t('message.preferences_load_error'),
-        type: 'error'
+    })
+
+    onMounted(() => {
+      store.dispatch(`${space}/${ACTION_TYPES.LOAD_GENERAL}`).catch(() => {
+        ElMessage({
+          message: i18n.t('message.preferences_load_error'),
+          type: 'error'
+        })
       })
     })
-  },
-  methods: {
-    reset() {
-      this.$store
-        .dispatch('Preferences/General/reset')
+
+    const reset = () => {
+      store
+        .dispatch(`${space}/${ACTION_TYPES.RESET}`)
         .then(language => {
-          this.$i18n.locale = language
+          i18n.changeLanguage(language)
         })
         .catch(() => {
-          this.$message({
-            message: this.$t('message.preferences_load_error'),
+          ElMessage({
+            message: i18n.t('message.preferences_load_error'),
             type: 'error'
           })
         })
     }
+
+    return {
+      loading,
+      backgroundColor,
+      notDarwin,
+      sound_fav_rb,
+      sound_toot,
+      timeline_cw,
+      timeline_nsfw,
+      timeline_hide_attachments,
+      other_launch,
+      reset
+    }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/renderer/store/Preferences/General.ts

@@ -45,15 +45,23 @@ const mutations: MutationTree<GeneralState> = {
   }
 }
 
+export const ACTION_TYPES = {
+  LOAD_GENERAL: 'loadGeneral',
+  UPDATE_SOUND: 'updateSound',
+  UPDATE_TIMELINE: 'updateTimeline',
+  UPDATE_OTHER: 'updateOther',
+  RESET: 'reset'
+}
+
 const actions: ActionTree<GeneralState, RootState> = {
-  loadGeneral: async ({ commit }) => {
+  [ACTION_TYPES.LOAD_GENERAL]: async ({ commit }) => {
     const conf: BaseConfig = await win.ipcRenderer.invoke('get-preferences').finally(() => {
       commit(MUTATION_TYPES.CHANGE_LOADING, false)
     })
     commit(MUTATION_TYPES.UPDATE_GENERAL, conf.general as General)
     return conf
   },
-  updateSound: async ({ commit, state }, sound: object) => {
+  [ACTION_TYPES.UPDATE_SOUND]: async ({ commit, state }, sound: object) => {
     commit(MUTATION_TYPES.CHANGE_LOADING, true)
     const newSound: Sound = Object.assign({}, state.general.sound, sound)
     const newGeneral: General = Object.assign({}, toRaw(state.general), {
@@ -67,7 +75,7 @@ const actions: ActionTree<GeneralState, RootState> = {
     })
     commit(MUTATION_TYPES.UPDATE_GENERAL, conf.general as General)
   },
-  updateTimeline: async ({ commit, state, dispatch }, timeline: object) => {
+  [ACTION_TYPES.UPDATE_TIMELINE]: async ({ commit, state, dispatch }, timeline: object) => {
     commit(MUTATION_TYPES.CHANGE_LOADING, true)
     const newTimeline: Timeline = Object.assign({}, state.general.timeline, timeline)
     const newGeneral: General = Object.assign({}, toRaw(state.general), {
@@ -82,7 +90,7 @@ const actions: ActionTree<GeneralState, RootState> = {
     commit(MUTATION_TYPES.UPDATE_GENERAL, conf.general as General)
     dispatch('App/loadPreferences', null, { root: true })
   },
-  updateOther: async ({ commit, state, dispatch }, other: {}) => {
+  [ACTION_TYPES.UPDATE_OTHER]: async ({ commit, state, dispatch }, other: {}) => {
     commit(MUTATION_TYPES.CHANGE_LOADING, true)
     const newOther: Other = Object.assign({}, state.general.other, other)
     const newGeneral: General = Object.assign({}, toRaw(state.general), {
@@ -98,7 +106,7 @@ const actions: ActionTree<GeneralState, RootState> = {
     dispatch('App/loadPreferences', null, { root: true })
     await win.ipcRenderer.invoke('change-auto-launch', newOther.launch)
   },
-  reset: async ({ commit, dispatch }): Promise<string> => {
+  [ACTION_TYPES.RESET]: async ({ commit, dispatch }): Promise<string> => {
     commit(MUTATION_TYPES.CHANGE_LOADING, true)
     try {
       const conf: BaseConfig = await win.ipcRenderer.invoke('reset-preferences')