Vue3项目起步该做的二三事-蒲公英云

1.添加配置文件

vuex-持久化插件
封装axios-提供请求函数
封装axios-集中添加token

5.封装axios-剥离无效数据+集中处理401

路由设计
安装调试工具

8.划分vuex模块

1.添加配置文件

路径提示配置：当我们使用路径别名@的时候可以提示路径。

方法：新建jsconfig.json 文件，将下面的内容复制进去

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
    }
  },
  "exclude": ["node_modules", "dist"]
}

eslint忽略配置：eslint在做风格检查的时候忽略 dist 和 vender 不去检查。

方法：新建 .eslintignore文件，将下面的内容复制进去

/dist
/src/vender

#

2. vuex-持久化插件

业务场景：

多用于保存用户token

什么是持久化：让数据保存的时间长些

将数据保存到本地存储或者是cookie中，这样页面刷新就不会丢失了。

步骤：

01 安装插件

npm i vuex-persistedstate

02 使用 store/index.js中

import { createStore } from 'vuex'
+ import createPersistedstate from 'vuex-persistedstate'
import user from './modules/user'
import cart from './modules/cart'
import cart from './modules/category'
export default createStore({
  modules: {
    user,
    cart,
    category
  },
+  plugins: [
+    createPersistedstate({
+      key: 'erabbit-client-pc-store',
+      paths: ['user', 'cart']
+    })
+  ]
})

注意点：

默认是存储在localStorage中
key是存储数据的键名
paths是存储state中的那些数据，如果是模块下具体的数据需要加上模块名称，如user.token
修改state后触发才可以看到本地存储数据的的变化。

#

3. 封装axios-提供请求函数

目标：基于axios封装一个请求工具，调用接口时使用

要做的事：安装axios —-> 封装request模块

步骤：

01 安装 axios

npm i axios

02 新建request模块

建立 src/utils/request.js 模块，代码如下

// 1. 创建一个新的axios实例
// 2. 请求拦截器，如果有token进行头部携带
// 3. 响应拦截器：1. 剥离无效数据  2. 处理token失效
// 4. 导出一个函数，调用当前的axsio实例发请求，返回值promise
import axios from 'axios'
export const baseURL = 
const instance = axios.create({
  // axios 的一些配置，baseURL  timeout
  baseURL:'http://pcapi-xiaotuxian-front-devtest.itheima.net',
  timeout: 5000
})
// 请求工具函数
export default (url, method, submitData) => {
  // 负责发请求：请求地址，请求方式，提交的数据
  return instance({
    url,
    method,
    // 1. 如果是get请求  需要使用params来传递submitData   ?a=10&c=10
    // 2. 如果不是get请求  需要使用data来传递submitData   请求体传参
    // [] 设置一个动态的key, 写js表达式，js表达式的执行结果当作KEY
    // method参数：get,Get,GET  转换成小写再来判断
    // 在对象，['params']:submitData ===== params:submitData 这样理解
    [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
  })
}

4. 封装axios-集中添加token

书接上回，还是封装axios的文件中

// 1. 创建一个新的axios实例
// 2. 请求拦截器，如果有token进行头部携带
// 3. 响应拦截器：1. 剥离无效数据  2. 处理token失效
// 4. 导出一个函数，调用当前的axsio实例发请求，返回值promise
import axios from 'axios'
import store from '@/store'
// 导出基准地址，原因：其他地方不是通过axios发请求的地方用上基准地址
export const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net/'
const instance = axios.create({
  // axios 的一些配置，baseURL  timeout
  baseURL,
  timeout: 5000
})
// 请求拦截器： 加(注入)token
instance.interceptors.request.use(
  config => {
    console.log('store', store)
    // 如何在.js中获取vuex中的token
    // import store from '@/store'
    const token = store.state.user.profile.token
    if (token) {
      // 设置请求头
      config.headers.Authorization = `Bearer ${token}`
    }
    // if (如果有token) {
    //    就带上
    // }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

5.封装axios-剥离无效数据+集中处理401

目标：

剥离无效数据：对接口返回值又做了封装：外部补充一个data，导致获取数据都需要写res.data

集中处理401：对没有401错误可以方便的集中处理。

代码实现：

import axios from 'axios'
import store from '@/store'
import router from '@/router'
// 导出基准地址，原因：其他地方不是通过axios发请求的地方用上基准地址
export const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net/'
const instance = axios.create({
  // axios 的一些配置，baseURL  timeout
  baseURL,
  timeout: 5000
})
// 响应拦截器
instance.interceptors.response.use(
  response => response.data, // 请求成功
  error => {
    // console.log('请求出错啦', error)
    // console.dir(error)
    if (error.response.status === 401) {
      console.log('token错误')
      // 1. 清空本地个人信息
      store.commit('user/setUser', {})
      // .vue -- this.$route.fullPath
      //  .js -- router.currentRoute: 是ref数据，要加.value
      // .fullPath: 完整的path（参查询参数的）
      // 2. 跳到登录页
      router.push('/login?return_url=' + encodeURIComponent(router.currentRoute.value.fullPath))
    }
    return Promise.reject(error)
  }
)
// 请求工具函数
export default (url, method, submitData) => {
  // 负责发请求：请求地址，请求方式，提交的数据
  return instance({
    url,
    method,
    // 1. 如果是get请求  需要使用params来传递submitData   ?a=10&c=10
    // 2. 如果不是get请求  需要使用data来传递submitData   请求体传参
    // [] 设置一个动态的key, 写js表达式，js表达式的执行结果当作KEY
    // method参数：get,Get,GET  转换成小写再来判断
    // 在对象，['params']:submitData ===== params:submitData 这样理解
    [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
  })
}

#

6. 路由设计

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70

思路：如何从UI图中分析出路由设计？

找到页面中变化和不变的部分，将变化的部分设计成次级路由（）
先做大页面（1级路由），然后再来细分。

#

7. 安装调试工具

目标:安装针对于vue3的开发调试环境

Dev-tools安装

作为vue框架官方调试工具，dev-tools提供了对于组件关系和数据状态方便的查看和调试功能，现在它也更新到了适配vue3的版本，我们这次的项目使用最新的版本进行预览调试开发

Logger Plugin 安装

当前的调试工具暂时不支持vuex的调试查看，需要我们额外进行log调试，vuex内置了一个logger模块，我们只需要引入并且注册为插件即可。

安装好这个log插件之后，我们每次触发action函数和mutation函数都可以在控制台打印出当前本地提交的记录详细信息，包括名称 参数 修改前后的state数据

+ import { createLogger } from 'vuex'
export default createStore({
  modules: {
    user,
    cart,
    category
  },
  plugins: [
+    createLogger()
  ]
})

8.划分vuex模块

为什么这么做：我们利用vuex保存数据，当数据特别多的时候，就用到modules来按照模块划分，然后注册使用。

步骤：01 创建modules：

举例：在src/store 文件夹下新建 modules 文件夹，在 modules 下新建 user.js 和 cart.js

// 用户模块
export default {
  namespaced: true,
  state () {
    return {
      // 用户信息
      profile: {
        id: '',
        avatar: '',
        nickname: '',
        account: '',
        mobile: '',
        token: ''
      }
    }
  },
  mutations: {
    // 修改用户信息，payload就是用户信息对象
    setUser (state, payload) {
      state.profile = payload
    }
  }
}

步骤：02 在store/ index.js中引入

在 src/store/index.js 中导入

import { createStore } from 'vuex' // vuex 的工厂函数
import user from './modules/user'  // 引入咱们写的模块
import cart from './modules/cart'
import category from './modules/category'
export default createStore({
  modules: {
    user,  // 在这里注册
    cart,
    category
  }
})