vue3项目-小兔鲜儿笔记-01-项目初始化

1.pinia基础

store/modules/user.ts

import { defineStore } from 'pinia'
// 用户模块
const useUserStore = defineStore('user', {
  state: () => {
    return {
      // 用户信息
      profile: {} as UserProfile
    }
  },
  actions: {
    // 修改用户信息
    setUser (payload: UserProfile) {
      this.profile = payload
    }
  }
})

export default useUserStore

2.pinia本地持久化

1. npm install pinia-persistedstate

2. 在pinia中使用pinia-persistedstate

main.ts

import router from './router'
import { createPinia } from 'pinia'
import persistedState from 'pinia-persistedstate'
import { createApp } from 'vue'
import App from './App.vue'

// pinia本地持久化，将user模块和cart模块的数据存储到localStorage
const store = createPinia()
store.use(
  persistedState({
    key: 'erabbit-shop',
    paths: ['user', 'cart']
  })
)
createApp(App).use(router).use(store).mount('#app')

3.请求工具

1. npm install axios

2. 封装一个请求工具函数，供调用时使用

utils/request.ts

import axios, { AxiosRequestHeaders } from 'axios'
import useStore from '@/store'
import router from '@/router'

const { useUserStore } = useStore()
const userStore = useUserStore()

// 1.创建一个新的axios实例
export const baseURL = 'https://apipc-xiaotuxian-front.itheima.net'
const instance = axios.create({
  baseURL,
  timeout: 5000
})

// 2.请求拦截器，如果有token就进行头部携带
instance.interceptors.request.use(
  (config) => {
    // 判断token
    const { token } = userStore.profile
    console.log(token)
    if (token) {
      (config.headers as AxiosRequestHeaders).Authorization = `Bearer ${token}`
    }
    return config
  },
  (err) => {
    return Promise.reject(err)
  }
)

// 3.响应拦截器，1.剥离无效数据 2.处理token失效
instance.interceptors.response.use(
  (res) => res.data,
  (err) => {
    // 如果是401状态码
    if (err.response && err.response.status === 401) {
      // 1.清空无效用户信息
      userStore.setUser({} as UserProfile)
      // 2.跳转到登录页，且跳转需传参(当前路由地址)，方便登录后跳回当前页面
      // 当前路由地址怎么获取？
      // 组件里面：`/user?a=10` $route.path === /user $route.fullPath === /user?a=10
      // ts模块中：router.currentRoute.value.fullPath，router.currentRoute是ref响应式对象
      // 同时要处理?后面的参数，因为前面已经带有=了，不能有多个=
      // encodeURICompoennt：转换URI编码，防止解析地址出问题
      const fullPath = encodeURIComponent(router.currentRoute.value.fullPath)
      router.push(`/login?redirectUrl=${fullPath}`)
    }
    return Promise.reject(err)
  }
)

// 4.导出一个函数，函数内部使用当前的axios实例发送请求，返回promise
const request = (url: string, method: string, submitData: any) => {
  // 负责发请求：请求地址，请求方式，提交的数据
  // axios实例返回的就是promise
  return instance({
    url,
    method,
    // 1.如果是get请求，就通过params传递submitData
    // 2.如果是post请求，就通过data传递submitData
    // const a = {name: 'jzh'}, a[10>9 ? 'name':'age] 动态的key
    [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
  })
}

export default request

4.路由设计