refactor: refactor store

Vben

2021-04-10 215d8bab380728164d7fe2958c2d2d1151fce892

 src/views/sys/error-log/index.vue

@@ -1,9 +1,9 @@
<template>
  <div class="p-4">
    <template v-for="src in imgListRef" :key="src">
    <template v-for="src in imgList" :key="src">
      <img :src="src" v-show="false" />
    </template>
    <DetailModal :info="rowInfoRef" @register="registerModal" />
    <DetailModal :info="rowInfo" @register="registerModal" />
    <BasicTable @register="register" class="error-handle-table">
      <template #toolbar>
        <a-button @click="fireVueError" type="primary">
@@ -28,6 +28,8 @@
</template>

<script lang="ts">
  import type { ErrorLogInfo } from '/#/store';

  import { defineComponent, watch, ref, nextTick } from 'vue';

  import DetailModal from './DetailModal.vue';
@@ -37,24 +39,23 @@
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';

  import { errorStore, ErrorInfo } from '/@/store/modules/error';
  import { useErrorLogStore } from '/@/store/modules/errorLog';

  import { fireErrorApi } from '/@/api/demo/error';

  import { getColumns } from './data';

  import { cloneDeep } from 'lodash-es';
  import { isDevMode } from '/@/utils/env';

  export default defineComponent({
    name: 'ErrorHandler',
    components: { DetailModal, BasicTable, TableAction },
    setup() {
      const rowInfoRef = ref<ErrorInfo>();
      const imgListRef = ref<string[]>([]);
      const rowInfo = ref<ErrorLogInfo>();
      const imgList = ref<string[]>([]);

      const { t } = useI18n();

      const errorLogStore = useErrorLogStore();
      const [register, { setTableData }] = useTable({
        title: t('sys.errorLog.tableTitle'),
        columns: getColumns(),
@@ -68,7 +69,7 @@
      const [registerModal, { openModal }] = useModal();

      watch(
        () => errorStore.getErrorInfoState,
        () => errorLogStore.getErrorLogInfoList,
        (list) => {
          nextTick(() => {
            setTableData(cloneDeep(list));
@@ -79,12 +80,12 @@
        }
      );
      const { createMessage } = useMessage();
      if (isDevMode()) {
      if (import.meta.env.DEV) {
        createMessage.info(t('sys.errorLog.enableMessage'));
      }
      // 查看详情
      function handleDetail(row: ErrorInfo) {
        rowInfoRef.value = row;
      function handleDetail(row: ErrorLogInfo) {
        rowInfo.value = row;
        openModal(true);
      }

@@ -93,7 +94,7 @@
      }

      function fireResourceError() {
        imgListRef.value.push(`${new Date().getTime()}.png`);
        imgList.value.push(`${new Date().getTime()}.png`);
      }

      async function fireAjaxError() {
@@ -107,8 +108,8 @@
        fireVueError,
        fireResourceError,
        fireAjaxError,
        imgListRef,
        rowInfoRef,
        imgList,
        rowInfo,
        t,
      };
    },