Vue3 axios配置以及cookie的使用方法实例演示

下面是关于“Vue3 axios配置以及cookie的使用方法实例演示”的完整攻略。

1. Vue3 axios配置

在Vue3项目中使用axios需要先安装axios库，可以通过以下命令进行安装：

npm install axios --save

安装完成后，需要在Vue3项目中进行配置。通常情况下，我们推荐将axios配置在src/plugins/axios.js 文件中。

在axios.js文件中，我们可以先引入axios库和Vue3库：

import axios from 'axios';
import { createApp } from 'vue';
const app = createApp();

然后我们需要设置axios的默认配置，可以通过如下代码进行设置：

axios.defaults.baseURL = process.env.VUE_APP_BASE_API;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.withCredentials = true;
axios.defaults.timeout = 5000;

这里我们设置了axios的请求超时时间为5秒，同时允许跨域访问，并指定Content-Type为application/x-www-form-urlencoded类型。

接下来，我们可以将axios挂载到Vue3实例上：

app.config.globalProperties.$axios = axios;

这里我们将axios挂载到了Vue3实例的全局属性中，以便于在项目中的任何组件中都可以使用$axios进行请求。

完整的axios.js配置文件代码如下所示：

import axios from 'axios';
import { createApp } from 'vue';
const app = createApp();

axios.defaults.baseURL = process.env.VUE_APP_BASE_API;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.withCredentials = true;
axios.defaults.timeout = 5000;

app.config.globalProperties.$axios = axios;

2. Cookie的使用方法实例演示

在Vue3项目中，我们可以通过js-cookie库来操作cookie。可以通过以下命令进行安装：

npm install js-cookie --save

安装完成后，我们可以在Vue3组件中使用如下代码进行cookie的设置与获取：

import cookie from 'js-cookie';

// 设置cookie
cookie.set('name', 'value');

// 获取cookie
const name = cookie.get('name');

除此之外，js-cookie库还提供了许多其他的API，例如获取所有的cookie、删除cookie等，具体使用方法可参考js-cookie库的官方文档。

下面，我们来看一个示例代码，以演示cookie在Vue3项目中的使用方法：

<template>
  <div>
    <h1>Vue3中cookie的使用方法实例演示</h1>
    <button @click="setCookie">设置Cookie</button>
    <button @click="getCookie">获取Cookie</button>
  </div>
</template>

<script>
import cookie from 'js-cookie';

export default {
  name: 'CookieDemo',
  methods: {
    setCookie() {
      cookie.set('name', 'Vue3');
      alert('Cookie已设置');
    },
    getCookie() {
      const name = cookie.get('name');
      alert(`Cookie值为：${name}`);
    }
  }
}
</script>

上述代码中，我们通过点击按钮来进行cookie的设置与获取，并通过弹窗来显示cookie的值。

这就是关于“Vue3 axios配置以及cookie的使用方法实例演示”的完整攻略，希望对你有所帮助。