refs #3301 Rewrite Settings/General with composition API

src/renderer/components/Settings/General.vue

@@ -18,46 +18,49 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, computed, onMounted } from 'vue'
+import { useStore } from '@/store'
+import { ACTION_TYPES } from '@/store/Settings/General'
 import Visibility from '~/src/constants/visibility'
 
-export default {
+export default defineComponent({
   name: 'General',
-  data() {
+  setup() {
+    const space = 'Settings/General'
+    const store = useStore()
+
+    const visibilities = [Visibility.Public, Visibility.Unlisted, Visibility.Private]
+
+    const tootVisibility = computed({
+      get: () => store.state.Settings.General.visibility,
+      set: value => store.dispatch(`${space}/${ACTION_TYPES.SET_VISIBILITY}`, value)
+    })
+    const tootSensitive = computed({
+      get: () => store.state.Settings.General.sensitive,
+      set: value => store.dispatch(`${space}/${ACTION_TYPES.SET_SENSITIVE}`, value)
+    })
+
+    onMounted(() => {
+      store.dispatch(`${space}/${ACTION_TYPES.FETCH_SETTINGS}`)
+    })
+
+    const changeVisibility = (value: number) => {
+      tootVisibility.value = value
+    }
+    const changeSensitive = (value: boolean) => {
+      tootSensitive.value = value
+    }
+
     return {
-      visibilities: [Visibility.Public, Visibility.Unlisted, Visibility.Private]
-    }
-  },
-  computed: {
-    tootVisibility: {
-      get() {
-        return this.$store.state.Settings.General.visibility
-      },
-      set(value) {
-        this.$store.dispatch('Settings/General/setVisibility', value)
-      }
-    },
-    tootSensitive: {
-      get() {
-        return this.$store.state.Settings.General.sensitive
-      },
-      set(value) {
-        this.$store.dispatch('Settings/General/setSensitive', value)
-      }
-    }
-  },
-  created() {
-    this.$store.dispatch('Settings/General/fetchSettings')
-  },
-  methods: {
-    changeVisibility(value) {
-      this.tootVisibility = value
-    },
-    changeSensitive(value) {
-      this.tootSensitive = value
+      visibilities,
+      tootVisibility,
+      tootSensitive,
+      changeVisibility,
+      changeSensitive
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/renderer/store/Settings/General.ts

@@ -27,8 +27,14 @@ const mutations: MutationTree<GeneralState> = {
   }
 }
 
+export const ACTION_TYPES = {
+  FETCH_SETTINGS: 'fetchSettings',
+  SET_VISIBILITY: 'setVisibility',
+  SET_SENSITIVE: 'setSensitive'
+}
+
 const actions: ActionTree<GeneralState, RootState> = {
-  fetchSettings: async ({ commit, rootState }): Promise<Entity.Account> => {
+  [ACTION_TYPES.FETCH_SETTINGS]: async ({ commit, rootState }): Promise<Entity.Account> => {
     const client = generator(
       rootState.TimelineSpace.sns,
       rootState.TimelineSpace.account.baseURL,
@@ -43,7 +49,7 @@ const actions: ActionTree<GeneralState, RootState> = {
     commit(MUTATION_TYPES.CHANGE_SENSITIVE, res.data.source!.sensitive)
     return res.data
   },
-  setVisibility: async ({ commit, rootState }, value: number) => {
+  [ACTION_TYPES.SET_VISIBILITY]: async ({ commit, rootState }, value: number) => {
     const client = generator(
       rootState.TimelineSpace.sns,
       rootState.TimelineSpace.account.baseURL,
@@ -57,7 +63,7 @@ const actions: ActionTree<GeneralState, RootState> = {
     commit(MUTATION_TYPES.CHANGE_VISIBILITY, visibility!.value)
     return res.data
   },
-  setSensitive: async ({ commit, rootState }, value: boolean) => {
+  [ACTION_TYPES.SET_SENSITIVE]: async ({ commit, rootState }, value: boolean) => {
     const client = generator(
       rootState.TimelineSpace.sns,
       rootState.TimelineSpace.account.baseURL,