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");
          store.commit("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= post
Vue.prototype.$get= get
Vue.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请求失败的提示 

 下面为效果展示：