开发业务（4）——vue基础库使用

  在一些真实开发里面遇到的问题进行整理。对于初级开发页面，必然遇到的vue开发相关问题。一些常用的vue开发库理解与使用，包括注意事项。本节实战一个用户登录和注册使用到的vue相关功能。

import axios from 'axios'
// 创建一个 Axios 实例 request，配置了 baseURL、timeout 和 headers
const request = axios.create({
    baseURL: global.baseUrl, // 设置基础 URL
    timeout: 10000, // 设置超时时间为 10 秒
    headers: {
        'Content-Type': 'application/json;charset=UTF-8' // 设置请求头 Content-Type
    }
});

// 定义一个 Code 对象，包含不同的响应状态码
const Code = {
    Success: 1, // 成功状态码
    AuthFailed: 401, // 认证失败状态码
    Fail: 300, // 失败状态码
    Error: 500 // 错误状态码
};

// 在请求的拦截器中，处理请求配置
request.interceptors.request.use(
    config => {
        // 从 store 中获取 token
        const token = store.token;
        // 如果 token 存在，则设置请求头的 token 字段
        if (token) {
            config.headers.token = token;
        }
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

// 在响应的拦截器中，处理响应数据和错误
request.interceptors.response.use(
    response => {
        const data = response.data;
        const code = data.code;
        if (code === Code.Success) {
            // 如果响应中的 code 等于成功状态码，则返回处理后的数据
            // 也可以显示成功提示消息，注释掉的代码是显示成功提示消息的方式
            // showSuccessToast(response.data.msg || 'Success');
            return Promise.resolve(data);
        } else if (code === 0) {
            // 如果响应中的 code 等于 0，则显示失败提示消息，并且返回一个错误
            showFailToast(response.data.msg || 'Error');
            return Promise.reject(new Error(data.msg));
        } else {
            // 如果响应中的 code 不等于成功状态码或 0，则显示失败提示消息，并且返回一个错误
            // showFailToast(response.data.msg || 'Error');
            return Promise.reject(new Error(data.msg));
        }
    },
    error => {
        // 如果请求发生错误（例如网络错误或响应错误），则在此处理
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    // 如果响应状态码为 401，则显示登录失效提示消息，并且跳转到登录页面
                    showFailToast('登录失效');
                    router.replace('/login');
                    break;
                case 404:
                    // 如果响应状态码为 404，则显示网络请求不存在的提示消息
                    showFailToast('网络请求不存在');
                    break;
                default:
                    // 对于其他响应状态码，显示默认的错误消息或者响应中的消息
                    showFailToast(error.response.data.msg || 'Error');
            }
        }
        return Promise.reject(error);
    }
);

// 定义一个 requestUtil 对象，包含了各种 HTTP 请求方法
const requestUtil = {
    get: (url, params = {}, config = {}) => {
        return request.get(url, { params, ...config });
    },
    post: (url, params = {}, config = {}) => {
        return request.post(url, params, config);
    },
    put: (url, params = {}, config = {}) => {
        return request.put(url, params, config);
    },
    patch: (url, params = {}, config = {}) => {
        return request.patch(url, params, config);
    },
    delete: (url, params = {}, config = {}) => {
        return request.delete(url, { params, ...config });
    },
    download: (url, params = {}, config = {}) => {
        // 定义一个下载方法，发送 POST 请求，设置 responseType 为 blob
        return request.post(url, params, { ...config, responseType: 'blob' });
    }
};

2.Pinia 库  vue3的数据持久化库

Pinia  VUE官方推出的状态管理库。主要替代vue2里面的vuex,进行状态管理。
 import {defineStore} from 'pinia' //库的引入，引入关键的定义储存方法
 difineStore的属性  id  唯一标志符
 state  返回出来的数据
 actions 持久化的动作，其他页面可以使用 useAuthStore.actions.login() 直接调用逻辑

数据的持久化，一般用户登录到一个页面，需要在本地保存对应信息，减少不必要的网络请求，需要让数据进行持久化:。减少远程数据的反复请求，不需要实时更新的数据，全部存入缓存里面即可

3.表单组件

表单组件  适用在所有需要输入框的场景，包括登录/注册/修改数据的场景 就是html的form表单，但是到了vue里面，进行了进一步的优化: 创建表单如下:
<van-form @submit="onSubmit">    </van-form>

填充里面的field  相关字段 

  <van-field  v-model="loginForm.account"   name="用户" 

   placeholder="请输入账号"

   :rules="[{ required: true, message: '请填写账号' }]">

      </van-field>

让form表单绑定相关数据v-model，这样输入框里面填入数据，该变量会自动改变。
 提交   和html里面的submit是一样的

<van-button r type="primary" native-type="submit">登录</van-button>

Script代码里面:
const loginForm = reactive({

  account: '',

  password: ''

})

用reactive定义一个响应变量，和输入框的数据进行绑定。  点击登录的时候，会触发submit按钮，执行数据提交方法。

注意这里表单的俩种数据提交方法:
一种是<van-form @submit="onSubmit">  加上submit事件，另外一种是直接点击的时候
 <van-button type="primary" native-type="submit" @click="registerSubmit">
第二种是直接在注册提交的时候 赋予一个点击事件。俩者效果差不多。都是提交数据，触发远程交互。

4. 地址列表插件

地址列表插件的引入  类似的插件很多。主要实现的效果，就是点开实现可以选择地址

如果该功能不借助库，工作量将会非常大 在vue直接拥有该库的实现，直接引用即可
import {areaList} from '@vant/area-data' // 导入地区数据

<div@click="showCityList"> 选择地区</div> /触发展示城市事件

5. 单页面的弹框切换   SFC场景应用特别多，就是点击A按钮，当前页面就是A按钮的数据，点击B按钮，页面变动了，但是实际上页面并没有刷新，也没有跳走。当前很多页面在初始化之后，基本不再频繁刷新页面数据，只在点击相关交互的时候，请求后端，这个时候需要弹框切换，来实现

弹框事件  点击查看城市，会弹框出来，这里的弹框可以是任意弹框，绑定一个v-model的变量，如果点击的时候 是show 否则是hidden

   <van-dialog v-model:show="isCity" title="城市列表" show-cancel-button :showConfirmButton="false"

                :showCancelButton="false">

      <van-area v-model="registeForm.cityCode" :area-list="areaList" @cancel="isCity=false" @confirm="areaConfirm"/>

    </van-dialog>

弹框场景非常多 修改弹窗 通知弹窗 成功失败弹窗都可以用v-model:show 绑定就可以

6.模块触发条件  就是一个选项   比如一个模块里面同一个场景下，不是登录就是注册  这俩种，需要使用 v-if  v-else 来实现 和上面点击模块切换效果有点类似，但是更加适用特定场合的替换

模块的条件触发，A条件触发 一个模块，B条件触发另外一个模块 
  单页面开发不同版面的时候，基本就是用不同的 条件  假设
  <div class="login_form" v-if="formType==='login'">

    <div class="register" v-else>
 在一个页面默认情况是登录，如果点击会跳转到注册，这样默认情况下 定义一个f const  formType = ref(“login”)