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请求失败的提示
下面为效果展示: