自学笔记：Vue加入购物车功能-游客临时身份

自学用来记录学习的内容，方便后续复习，各位大佬看到了勿喷 感谢

一个前置条件

临时游客身份加入购物车功能，需要一个前置条件（给每一位游客设置一个独一无二的身份信息）

一：创建utlis文件，index.js中引入uuid 库

uuid库已经自动安装到系统中可直接使用

import{v4 as uuidv4} from 'uuid'

逻辑：生成一个随机字符串，在每次添加购物车时，判断本地是否拥有该字符串，没有就生成字符串，并保存到本地存储

localStorage.setItem("UUIDTOKEN", uuid_tocken);

整体代码片段：utlis/index.js

import { v4 as uuidv4 } from "uuid"; //起别名 为 uuidv4
// 生成一个随机字符串，且没次执行不能发生变化，游客身份需要持久保存
export const getUUID = () => {
  // 先本地获取UUID（看本地是否有）
  let uuid_tocken = localStorage.getItem("UUIDTOKEN");
  // 如果uuid没有，就生成
  if (!uuid_tocken) {
    // 生成临时游客身份
    uuid_tocken = uuidv4();
    // 存储到本地存储
    localStorage.setItem("UUIDTOKEN", uuid_tocken);
  }
  return uuid_tocken;
};

二、Vuex库中（产品详情页的Vuex）

这部分是产品详情页代码，当用户点击添加到购物车时，就在state中添加uuid_token（调用uuid的模块方法），游客临时身份。

// 封装的临时游客身份模块uui----生成随机字符串(生成后不再更改)
import { getUUID } from "@/utils/uuid_tocken";
const actions = {
 // 等待产品详情模块派发actions
},
const mutations = {};

const state = {
  goodInfo: {},
  uuid_token: getUUID(), //游客；临时身份
};
const getters = {};

export default {
  actions,
  mutations,
  state,
  getters,
};

三、API请求配置中

1、在请求拦截器config配置对象中，给请求头添加一个字段，该字段具体名称由后端提供，（如果在Vuex中有uuid_token属性，那么发生请求时就协同该请请求头，一起发生到后端）

const requests = axios.create({
  // 配置对象
  baseURL: "/api",
  // 请求超时时间5s
  timeout: 5000,
});
// 请求拦截器：在请求发生前，拦截器可以检测到，可以在发送请求前做一些事情
requests.interceptors.request.use(
  // config：配置对象，对象里面有一个属性很重要，header请求头
  function (config) {
    if (store.state.detail.uuid_token) {
      // 给请求头添加一个字段(userTempId)是和后台沟通的
      config.headers.userTempId = store.state.detail.uuid_token;
    }
    // 在发送请求之前做些什么
    // 进度条开始动
    nprogress.start();
    return config;
  }
);
// 添加响应拦截器
requests.interceptors.response.use();
// 对外暴露
export default requests;

四、产品详情模块派发actions

当用户点击产品详情页的，加入购物车按钮时，就执行Vuex中的文件（包括封装的uuid模块），此时就会将uuid_token添加到Vuex中