refs #3301 Rewrite Settings/Timeline with composition API

src/renderer/components/Settings/Timeline.vue

@@ -8,13 +8,13 @@
       </p>
 
       <el-form-item for="direct" :label="$t('settings.timeline.unread_notification.direct')">
-        <el-switch v-model="direct" id="direct" />
+        <el-switch v-model="directNotify" id="direct" />
       </el-form-item>
       <el-form-item for="local" :label="$t('settings.timeline.unread_notification.local')">
-        <el-switch v-model="local" id="local" />
+        <el-switch v-model="localNotify" id="local" />
       </el-form-item>
       <el-form-item for="public" :label="$t('settings.timeline.unread_notification.public')">
-        <el-switch v-model="public" id="public" />
+        <el-switch v-model="publicNotify" id="public" />
       </el-form-item>
     </el-form>
 
@@ -33,75 +33,74 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { defineComponent, computed, onMounted } from 'vue'
+import { useStore } from '@/store'
+import { ACTION_TYPES } from '@/store/Settings/Timeline'
+
+export default defineComponent({
   name: 'Timeline',
-  computed: {
+  setup() {
-    direct: {
+    const space = 'Settings/Timeline'
-      get() {
+    const store = useStore()
-        return this.$store.state.Settings.Timeline.setting.unreadNotification.direct
+
-      },
+    const directNotify = computed({
-      set(value) {
+      get: () => store.state.Settings.Timeline.setting.unreadNotification.direct,
-        this.$store.dispatch('Settings/Timeline/changeUnreadNotification', {
+      set: value =>
+        store.dispatch(`${space}/${ACTION_TYPES.CHANGE_UNREAD_NOTIFICATION}`, {
           direct: value
         })
-      }
+    })
-    },
+    const localNotify = computed({
-    local: {
+      get: () => store.state.Settings.Timeline.setting.unreadNotification.local,
-      get() {
+      set: value =>
-        return this.$store.state.Settings.Timeline.setting.unreadNotification.local
+        store.dispatch(`${space}/${ACTION_TYPES.CHANGE_UNREAD_NOTIFICATION}`, {
-      },
-      set(value) {
-        this.$store.dispatch('Settings/Timeline/changeUnreadNotification', {
           local: value
         })
-      }
+    })
-    },
+    const publicNotify = computed({
-    public: {
+      get: () => store.state.Settings.Timeline.setting.unreadNotification.public,
-      get() {
+      set: value =>
-        return this.$store.state.Settings.Timeline.setting.unreadNotification.public
+        store.dispatch(`${space}/${ACTION_TYPES.CHANGE_UNREAD_NOTIFICATION}`, {
-      },
-      set(value) {
-        this.$store.dispatch('Settings/Timeline/changeUnreadNotification', {
           public: value
         })
-      }
+    })
-    },
+    const marker_home = computed({
-    marker_home: {
+      get: () => store.state.Settings.Timeline.setting.useMarker.home,
-      get() {
+      set: value =>
-        return this.$store.state.Settings.Timeline.setting.useMarker.home
+        store.dispatch(`${space}/${ACTION_TYPES.CHANGE_USER_MARKER}`, {
-      },
-      set(value) {
-        this.$store.dispatch('Settings/Timeline/changeUseMarker', {
           home: value
         })
-      }
+    })
-    },
+    const marker_notifications = computed({
-    marker_notifications: {
+      get: () => store.state.Settings.Timeline.setting.useMarker.notifications,
-      get() {
+      set: value =>
-        return this.$store.state.Settings.Timeline.setting.useMarker.notifications
+        store.dispatch(`${space}/${ACTION_TYPES.CHANGE_USER_MARKER}`, {
-      },
-      set(value) {
-        this.$store.dispatch('Settings/Timeline/changeUseMarker', {
           notifications: value
         })
-      }
+    })
-    },
+    const marker_mentions = computed({
-    marker_mentions: {
+      get: () => store.state.Settings.Timeline.setting.useMarker.mentions,
-      get() {
+      set: value =>
-        return this.$store.state.Settings.Timeline.setting.useMarker.mentions
+        store.dispatch(`${space}/${ACTION_TYPES.CHANGE_USER_MARKER}`, {
-      },
-      set(value) {
-        this.$store.dispatch('Settings/Timeline/changeUseMarker', {
           mentions: value
         })
-      }
+    })
+
+    onMounted(() => {
+      store.dispatch(`${space}/${ACTION_TYPES.LOAD_TIMELINE_SETTING}`)
+    })
+
+    return {
+      directNotify,
+      localNotify,
+      publicNotify,
+      marker_home,
+      marker_notifications,
+      marker_mentions
     }
-  },
-  async created() {
-    await this.$store.dispatch('Settings/Timeline/loadTimelineSetting')
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/renderer/store/Settings/Timeline.ts

@@ -25,13 +25,19 @@ const mutations: MutationTree<TimelineState> = {
   }
 }
 
+export const ACTION_TYPES = {
+  LOAD_TIMELINE_SETTING: 'loadTimelineSetting',
+  CHANGE_UNREAD_NOTIFICATION: 'changeUnreadNotification',
+  CHANGE_USER_MARKER: 'changeUserMarker'
+}
+
 const actions: ActionTree<TimelineState, RootState> = {
-  loadTimelineSetting: async ({ commit, rootState }): Promise<boolean> => {
+  [ACTION_TYPES.LOAD_TIMELINE_SETTING]: async ({ commit, rootState }): Promise<boolean> => {
     const setting: Setting = await win.ipcRenderer.invoke('get-account-setting', rootState.Settings.accountID)
     commit(MUTATION_TYPES.UPDATE_TIMELINE_SETTING, setting.timeline)
     return true
   },
-  changeUnreadNotification: async ({ dispatch, state, rootState }, timeline: { key: boolean }): Promise<boolean> => {
+  [ACTION_TYPES.CHANGE_UNREAD_NOTIFICATION]: async ({ dispatch, state, rootState }, timeline: { key: boolean }): Promise<boolean> => {
     const unread: UnreadNotification = Object.assign({}, state.setting.unreadNotification, timeline)
     const tl: TimelineSetting = Object.assign({}, toRaw(state.setting), {
       unreadNotification: unread
@@ -44,7 +50,7 @@ const actions: ActionTree<TimelineState, RootState> = {
     dispatch('loadTimelineSetting')
     return true
   },
-  changeUseMarker: async ({ dispatch, state, rootState }, timeline: { key: boolean }) => {
+  [ACTION_TYPES.CHANGE_USER_MARKER]: async ({ dispatch, state, rootState }, timeline: { key: boolean }) => {
     const marker: UseMarker = Object.assign({}, state.setting.useMarker, timeline)
     const tl: TimelineSetting = Object.assign({}, toRaw(state.setting), {
       useMarker: marker