关于处理异步和响应式问题

后台使用axios获取了数据，并且也可以console.log正常打印数据。但是页面的初始渲染之后，点击button按钮，<div>{{items}}</div>的内容并不发生改变。这个问题直接定位到响应问题，但是怎么处理呢？

其实我先想到了onMounted，（傻了）。我寻思在页面加载的时候就获取数据；但是这就算应用到实际的开发中，也是绝对的多此一举。甚至过度浪费本地资源和空间。

网上简单搜索了一下， 害.... ref()。

其实我想到过，但是我定义的是一个数组；所以排除了这个方法。看来，Vue3还是强大的，响应式数组也可以定义。以下就是这次踩坑的代码。重点的地方标记了。

<script setup>
import axios from "axios";
import { ref } from "vue";

let param = new URLSearchParams();
param.append("portalid", "BA80DF7EC792F0117093");
param.append("actionid", 1);
const tkName = ref([]); // 将 tkName 定义为响应式属性


const postEvent = function () {
  axios
    .post("/api", param)
    .then(res=> {
      for (var i = 0; i < res.data.iData.length; i++) {
        tkName.value.push(res.data.iData[i]) 
      }  console.log(tkName);
    })

    .catch(function (error) {
      console.log(error);
    });

};
</script>

<template>
  <button @click="postEvent()">POST</button>
  <div v-for="item in tkName">
    {{ item.tkName }}
  </div>
</template>

<style scoped></style>

这里的axios使用了

let param = new URLSearchParams();
param.append("portalid", "BA80DF7EC792F0117093");
param.append("actionid", 1);


///
  axios
    .post("/api", param)

这种方式传参，具体原因参考如何解决axios跨域问题