vue2.x 改造vue3.0 遇到的问题

Question

1. vue.2.5.2 页面片断：

  export default {
  name: 'Index',
  components: {
    Menu,
    GlobalSearch,
    Topic,
    List
  },
  data () {
    return {
      searchInfo: '',
      formInline: {},
      systemNm: '',
      orderByColumn: 'visitorVolume',
      isAsc: 'descending',
      menuData: [
        { id: '001', systemNm: '全部', count: '0', checked: true }
      ],
      topicData: []
  

  mounted () {
    this.getDataMapSystem()
    this.getDataMapSubjArea()
  },

  methods: {
    getDataMapSystem () {
      let query = {}
      getSystem(query)
        .then((res) => {
          const checkedData = this.addChecked(res.data)
          this.menuData[0].count = this.addCount(res.data)
          const spliceData = this.menuData.concat(checkedData)
          this.menuData = spliceData
        })
        .catch((res) => {
          console.log('失败：==>', res)
        })
    },
    addCount (data) {
      let sum = 0
      for (let i = 0; i < data.length; i++) {
        sum = sum + data[i].count
      }
      return sum
    },
    getDataMapSubjArea () {
      let query = {}
      getSubjArea(query)
        .then((res) => {
          const checkedData = this.addChecked(res.data)
          const spliceData = this.topicData.concat(checkedData)
          this.topicData = spliceData
        })
        .catch((res) => {
          console.log('失败：==>', res)
        })
    }
    }

2. vue3.0 改造片断：

<script>
import { defineComponent, ref, onMounted, reactive, toRefs } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getSubjArea, getSystem, getObjList } from "@/request/api.js";

export default defineComponent({
  name: "Index",
  // props: {
  //     list: {
  //         type: Array as PropType<ColumnProps[]>,
  //         required: true
  //     }
  // },
  setup(props) {
    onMounted(() => {
      console.log("为什么写在后面不行？");
    });
    const getDataMapSystem = async () => {
      let query = {}
      getSystem(query)
        .then((res) => {
          const checkedData = this.addChecked(res.data)
          this.menuData[0].count = this.addCount(res.data)
          const spliceData = this.menuData.concat(checkedData)
          this.menuData = spliceData
        })
        .catch((res) => {
          console.log('失败：==>', res)
        })
    }
    const data = reactive({
      searchInfo: '',
      formInline: {},
      systemNm: '',
      orderByColumn: 'visitorVolume',
      isAsc: 'descending',
      menuData: [
        { id: '001', systemNm: '全部', count: '0', checked: true }
      ],
      topicData: []
    });
    const refData = toRefs(data);

    return {
      ...refData,
    };
  },
});
</script>

问题：
this问题如何解决？多个函数如何调用，有些蒙啊

Answer 1

给个示意，建议仔细看看文档，尤其是 Composition API 部分。

另外建议使用 TypeScript 来写，会有一些类型提示和约束，多试错，有助于建立 Vue3 的类型体系思维。

export default defineComponent({
    name: "Index",
    setup(props) {
        const menuData = ref([
            { id: "001", systemNm: "全部", count: "0", checked: true }
        ]);

        function addCount(data) {
            return data.reduce((sum, value) => sum + value);
        }

        async function getDataMapSystem() {
            // TODO
            const res = await getSystem();
            menuData.value[0].count = addCount(res.data);
        }

        onMounted(() => {
            getDataMapSystem();
        });

        return {
            menuData,
            // 其它需要暴露给 template 的数据和方法
        };
    },
});