Vue.js笔记

Vue.js碎片式笔记，记录一下代码

Koyang

2023-04-21

2 min

全局变量

在main.js文件中加入

const app = createApp(App);
app.config.globalProperties.$uid = 1;

使用全局变量

<script>
import {  getCurrentInstance, onMounted } from "vue";
export default {
  name: "demo",
  setup() {
    const {
      appContext: {
        config: { globalProperties },
      },
    } = getCurrentInstance();
    onMounted(async () => {
      console.log(globalProperties.$uid);
    });
    return {
      onMounted
    };
  },
};
</script>

或使用setup语法糖

<script setup>
import { onMounted, getCurrentInstance } from "vue";
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
//全局变量
onMounted(() => {
  globalProperties.$uid = 2;//更改全局变量的值
});
</script>

生命周期函数

原生语法

<script>
import { onMounted } from "vue";

export default {
  name: "demo",
  setup() {
    onMounted(async () => {
      console.log("什么周期函数Mounted");
    });
    return {
      onMounted,
    };
  },
};
</script>

setup语法糖

<script setup>
import {onMounted} from 'vue'

onMounted(()=>{
  console.log('我创建了');
})
</script>

封装 Axios

安装axios，使用cmd命令pnpm install axios

先建立util/axios.js文件

import axios from "axios";

const service = axios.create({
  baseURL: "/api",
  timeout: 5000,
});
export default service;

在vite.config.js中sever加入proxy，如下所示

export default defineConfig({
  ~
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',//后端服务器地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }},
  ~
})

封装axios，在/api文件夹下建立业务层代码,例如

import axios from "~/util/axios"; //引入封装的axios,~号为设置的根目录路径

export function getUsersList() {
  //get请求，查询所有用户
  return axios.get("/alluser");
}
export function insertUser(userName, userPwd) {
  //post请求，添加一个新用户
  let formData = new FormData(); //可以将form表单直接放入构造器，自动封装
  formData.append("userName", userName);
  formData.append("userPwd", userPwd);
  return axios.post("/user/insert", formData);
}

全局变量
生命周期函数
封装 Axios