cart.js
// 清空购物车clearCart(state){state.list = [],state.selectAll = []}
axios.js
"use strict";import Vue from "vue";import axios from "axios";import store from "@/store";import router from "@/router";import { Toast } from "vant";axios.defaults.timeout = 10000;// post请求头axios.defaults.headers.post["Content-Type"] ="application/x-www-form-urlencoded;charset=UTF-8";/* 请求拦截器 */axios.interceptors.request.use((config) => {console.log(config);const token = store.state.user.token;config.headers.token = token;if (config.data != undefined) {if (config.headers.token == false && token) {Toast({message: "请登录",duration: 3000,forbidClick: true,});router.push("/login");}}return config;},(error) => {return Promise.reject(error);});/* 响应拦截器 */axios.interceptors.response.use((response) => {console.log(response);return response;},(error) => {if (error.response.status) {switch (error.response.status) {case 401:router.replace({name: "Login",});break;// 403 token过期// 登录过期对用户进行提示// 清除本地token和清空vuex中token对象// 跳转登录页面case 403:Toast({message: "请求超时,请重新登录",duration: 3000,forbidClick: true,});window.sessionStorage.removeItem("token");mit("loginSuccess", null);setTimeout(() => {router.replace({name: "Login",});}, 2000);break;case 404:Toast({message: "无网络",duration: 3000,forbidClick: true,});break;default:Toast({message: error.response.data.message,duration: 1500,forbidClick: true,});}}return Promise.reject(error);});export function get(url, params) {return new Promise((resolve, reject) => {axios.get(url, {params: {params,},}).then((res) => {resolve(res.data);}).catch((error) => {reject(error);});});}export function post(url, params) {return new Promise((resolve, reject) => {axios.post(url, QS.stringify(params)).then((res) => {resolve(res.data);}).catch((error) => {reject(error);});});}
main.js（引入封装好的以及全局的axios）
import {get,post} from './plugins/axios'axios.defaults.baseURL = "/api";Vue.prototype.$post= postVue.prototype.$get= getVue.prototype.$axios =axios
Detail.vue页面（详情页）
在cart.js的vuex中异步请求接口数据
actions: {doselectAll({ getters, commit }) {// 传getters中的状态，如果全选按钮是开启的那么就返回全不选，否则就在跳回全选getters.checkedAll ? commit("noselectAll") : commit("selectAll");},updateCartList(){Axios({url:'/cart',data:{},method:"get",headers:{token:true}}).then(v=>{console.log(v);})}},
在购物车页面Cart.vue中用状态接收请求
记得把user状态传过来
这样写的好处是无需请求数据即可判断是否为登录状态，如果是请求数据后在判断，则会出现404请求失败的提示
下面为效果展示：
