refs #3301 Rewrite Settings/Filters with composition API

src/renderer/components/Settings/Filters.vue

@@ -3,7 +3,7 @@
     <h2>{{ $t('settings.filters.title') }}</h2>
     <div class="new-filter">
       <el-button type="primary" :disabled="sns === 'misskey'">
-        <router-link :to="`/${id()}/settings/filters/new`">
+        <router-link :to="`/${id}/settings/filters/new`">
           {{ $t('settings.filters.new.title') }}
         </router-link>
       </el-button>
@@ -26,7 +26,7 @@
       <el-table-column width="80">
         <template #default="scope">
           <el-button type="text">
-            <router-link tag="span" :to="`/${id()}/settings/filters/${filters[scope.$index].id}/edit`">
+            <router-link tag="span" :to="`/${id}/settings/filters/${filters[scope.$index].id}/edit`">
               {{ $t('settings.filters.edit.title') }}
             </router-link>
           </el-button>
@@ -43,41 +43,52 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
-import { mapState } from 'vuex'
+import { defineComponent, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { ElMessageBox } from 'element-plus'
+import { useI18next } from 'vue3-i18next'
+import { useStore } from '@/store'
+import { ACTION_TYPES } from '@/store/Settings/Filters'
 
-export default {
+export default defineComponent({
   name: 'Filters',
-  computed: {
+  setup() {
-    ...mapState('Settings/Filters', {
+    const space = 'Settings/Filters'
-      filters: state => state.filters,
+    const store = useStore()
-      filtersLoading: state => state.filtersLoading
+    const route = useRoute()
-    }),
+    const i18n = useI18next()
-    ...mapState({
+
-      backgroundColor: state => state.App.theme.background_color
+    const filters = computed(() => store.state.Settings.Filters.filters)
-    }),
+    const filtersLoading = computed(() => store.state.Settings.Filters.filtersLoading)
-    ...mapState('TimelineSpace', {
+    const backgroundColor = computed(() => store.state.App.theme.background_color)
-      sns: state => state.sns
+    const sns = computed(() => store.state.TimelineSpace.sns)
+    const id = computed(() => route.params.id)
+
+    onMounted(async () => {
+      await store.dispatch(`${space}/${ACTION_TYPES.FETCH_FILTERS}`)
     })
-  },
+
-  async created() {
+    const deleteFilter = (id: string) => {
-    await this.$store.dispatch('Settings/Filters/fetchFilters')
+      ElMessageBox.confirm(i18n.t('settings.filters.delete.confirm'), 'Warning', {
-  },
+        confirmButtonText: i18n.t('settings.filters.delete.confirm_ok'),
-  methods: {
+        cancelButtonText: i18n.t('settings.filters.delete.confirm_cancel'),
-    id() {
-      return this.$route.params.id
-    },
-    deleteFilter(id) {
-      this.$confirm(this.$t('settings.filters.delete.confirm'), 'Warning', {
-        confirmButtonText: this.$t('settings.filters.delete.confirm_ok'),
-        cancelButtonText: this.$t('settings.filters.delete.confirm_cancel'),
         type: 'warning'
       }).then(() => {
-        return this.$store.dispatch('Settings/Filters/deleteFilter', id)
+        return store.dispatch(`${space}/${ACTION_TYPES.DELETE_FILTER}`, id)
       })
     }
+
+    return {
+      filters,
+      filtersLoading,
+      backgroundColor,
+      sns,
+      id,
+      deleteFilter
+    }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/renderer/store/Settings/Filters.ts

@@ -27,8 +27,14 @@ export const mutations: MutationTree<FiltersState> = {
     state.filtersLoading = loading
   }
 }
+
+export const ACTION_TYPES = {
+  FETCH_FILTERS: 'fetchFilters',
+  DELETE_FILTER: 'deleteFilter'
+}
+
 export const actions: ActionTree<FiltersState, RootState> = {
-  fetchFilters: async ({ commit, rootState }): Promise<Array<Entity.Filter>> => {
+  [ACTION_TYPES.FETCH_FILTERS]: async ({ commit, rootState }): Promise<Array<Entity.Filter>> => {
     const client = generator(
       rootState.TimelineSpace.sns,
       rootState.TimelineSpace.account.baseURL,
@@ -44,7 +50,7 @@ export const actions: ActionTree<FiltersState, RootState> = {
       commit(MUTATION_TYPES.CHANGE_LOADING, false)
     }
   },
-  deleteFilter: async ({ commit, dispatch, rootState }, id: string) => {
+  [ACTION_TYPES.DELETE_FILTER]: async ({ commit, dispatch, rootState }, id: string) => {
     const client = generator(
       rootState.TimelineSpace.sns,
       rootState.TimelineSpace.account.baseURL,