composition: update LogViewer

src/components/ftbot/LogViewer.vue

@@ -6,33 +6,34 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-import { namespace } from 'vuex-class';
-import { LogLine } from '@/types';
 import { BotStoreGetters } from '@/store/modules/ftbot';
 import StoreModules from '@/store/storeSubModules';
+import { defineComponent, onMounted, computed } from '@vue/composition-api';
+import { useNamespacedActions, useNamespacedGetters } from 'vuex-composition-helpers';
 
-const ftbot = namespace(StoreModules.ftbot);
+export default defineComponent({
+  name: 'LogViewer',
+  setup() {
+    const { lastLogs } = useNamespacedGetters(StoreModules.ftbot, [BotStoreGetters.lastLogs]);
+    const { getLogs } = useNamespacedActions(StoreModules.ftbot, ['getLogs']);
 
-@Component({})
-export default class LogViewer extends Vue {
-  @ftbot.Getter [BotStoreGetters.lastLogs]!: LogLine[];
+    onMounted(() => getLogs());
+    const formattedLogs = computed(() => {
+      let result = '';
+      for (let i = 0, len = lastLogs.value.length; i < len; i += 1) {
+        const log = lastLogs.value[i];
+        result += `${log[0]} - ${log[2]} - ${log[3]} - ${log[4]}\n`;
+      }
+      return result;
+    });
 
-  @ftbot.Action getLogs;
-
-  mounted() {
-    this.getLogs();
-  }
-
-  get formattedLogs() {
-    let result = '';
-    for (let i = 0, len = this.lastLogs.length; i < len; i += 1) {
-      const log = this.lastLogs[i];
-      result += `${log[0]} - ${log[2]} - ${log[3]} - ${log[4]}\n`;
-    }
-    return result;
-  }
-}
+    return {
+      getLogs,
+      lastLogs,
+      formattedLogs,
+    };
+  },
+});
 </script>
 
 <style lang="scss" scoped>