Vue Axios异步与数据类型转换问题浅析

validateLogin: (url, uname, pwd) => {
    // 使用post请求，请求体data即传入两个必要值
    http
      .post(url, {
        username: uname,
        password: pwd,
      })
      // 在then中处理请求成功的方法
      .then((res) => {
        console.log(res);
        let token = res.data.msg;
        localStorage.setItem("token", token);
        fastMessage.success("成功登录！");
      })
      // 在catch中处理请求失败的方法
      .catch((err) => {
        fastMessage.error("用户名或密码错误！");
        return false;
      });
    // 返回值有无取决于你的项目需求
    return true;
  },

import http from "./http.js";
let userDatas;
// 异步函数，发送后端查询数据库得到所有用户信息
async function userDataQuery(url) {
  try {
    // 异步请求后端并拿到结构Promise
    let res = await http.get(url);
    // 将获取到的响应体中的值赋予给全局变量
    userDatas = res.data.data;
    console.log(userDatas);
  } catch (err) {
    console.log("这TMD是错的");
  }
  // 返回全局变量
  return userDatas;
}
export default {
  userDataQuery,
};

import { onMounted, reactive, ref } from "vue";
import apiQuery from "../../api/api-query.js";
import dbStore from "../../store/db-store.js";
const store = dbStore();
let datas = reactive(store.$state.userLists);
// 执行最后一步的promise处理
apiQuery.userDataQuery("/sdb/allusers").then((res) => {
  // 调用store中的方法直接把数据存储到status域中的变量
  store.setUsersList(res);
  // 随意输出一些内容作为验证
  console.log(res);
});

import { defineStore } from "pinia";
import Names from "./names.js";
const dbStore = defineStore(Names.DBSTORE, {
  // 随意配置一个数组变量userLists
  state: () => {
    return {
      userLists: [],
    };
  },
  actions: {
    // 设置变量的值，形参data即传来的对象object
    setUsersList(data) {
      // 转换前务必清空变量值，否则会造成值重复添加现象
      this.userLists = [];
      // foreach将对象中的值一个个取出来添加到数组里面
      for (let i in data) {
        console.log(data[i]);
        this.userLists.push(data[i]);
      }
    },
  },
  getters: {},
});
export default dbStore;