1.用methods做过滤处理
本质上是字符串转换 从一种状态转换成另一种状态
比如字符串拼接
1/2 -> 男/女 如果只有两种状态 用三元即可 比如 {{ gender===1? "男" : "女" }}
如果有三种以上的状态要用枚举来做 例如
{{ formdata(dif)}}
data(){ return { dif:1 } }
methods :{ formdata(value){ const types = { 1:'简单', 2:'普通', 3:'困难' } return types[value] } }
2.vue3 main.js 文件里的
createApp: 可执行的函数 生成一个应用实例对象
import { createApp } from 'vue'
use:方法 用来注册组件 (Vue.use) 支持串联调用 以app根组件为参数生成的一个实例对象然后注册store插件注册router插件,最后完成挂载 createApp(App).use(store).use(router).mount('#app')
3. vue3 里router 文件下
createRouter方法 是用来生成router实例对象
createWebHashHistory:方法 用来调用生成hash模式的路由对象
实例化
const router = createRouter({ history: createWebHashHistory(), 注册history选项 为hash模式
routes // 配置路由path 和component的对应关系
})
4.vue3 的store文件
createStore;方法 用来生成store实例对象(new Vuex.store())
5.vue3.持久化
为什么要做持久化
- vuex 基于内存的方式 存储拿的快 刷新会丢失
2.cookie/localstorage 基于磁盘 稍慢 刷新不丢失 持久化
token 获取一次以后 在未过期之前 不能刷新就丢失 vuex + cookices 手动完成 1.拿到token 一式两份 vuex存一份 settoken 本地存一份 2.vuex 初始化的时候 先从本地取 取不到才初始化为 空
6.安装持久化插件 vuex-persistedstate
在store下的index里引入 import createPersisredstate from ' vuex-persistedstate'
在导出的createStore({
plugins: [ // 配置各种插件 // 触发机制: 只要你出发state数据的修改就会自动同步到本地 createPersisredstate({ key:'erabbit-client-pc-store', // key: value 可以自定义 将来用作存数据的key path:['user',cart] // 想要把那个没款的数据进行持久化就把他的名字写过来 }) ]
})
导出模块对象中加入 namespaced:true 开区命名空间
意味着严格意义上的模块化管理
7. 对axios的封装 通用
import axios from 'axios' const instance = axios.create({ baseURL: 'pcapi-xiaotuxian-front-devtest.itheima.net', timeout: 1000 }) // 添加请求拦截器 // 请求头里携带token instance.interceptors.request.use((config) => { // 在发送请求之前做些什么 return config }, (error) => { // 对请求错误做些什么 return Promise.reject(error) }) // 添加响应拦截器 // token的失效处理 401 跳回到登录页 简化返回的数据data的访问 // 成功回调和失败回调 是根据我们的http状态码来的
// 如果 后端把已经失败的状态码定义成了2xx 怎么办 // 那么就需要前段根据自定义字段判断成功失败 如果成功就return response // 失败就return Promise.reject() axios.interceptors.response.use((response) => { // 2xx 范围内的状态码都会触发该函数。 // 对响应数据做点什么 return response }, (error) => { // 超出 2xx 范围的状态码都会触发该函数。 // 对响应错误做点什么 return Promise.reject(error) })
8. 对封装一个简单的函数
/**
- 要求编写一个用来做请求的函数函数名称为request
- 这个函数可以接收三个参数 分别是接口的url,method,以及请求参数对象
- 这个函数的返回值是一个promise对象 可以通过以下方式调用发送接口请求 request('url','GET', {key:'cp'}).then(res=>{ console.log(res)})
- 程序健壮性优化？ 先转一步大写 不管用于输入大小写都可以兼容 */ // url:请求路径 // method:请求方法 // requestData: 对象格式 请求参数 function request (url, methods, requestData) { // 1. 发送接口请求 // 简单请求 params 复杂请求 data // 到底是哪个 由传入method决定 method是个get params // 如果是除了get之外的请他请求 data // 2. 返回一个promise return instance({ url, methods, [methods.toLowerCase() === 'GET' ? 'params' : 'data']: requestData // 如果key是一个表达式必须要用中括号来括起来 }) } export default request
9.项目的路由配置
import { createRouter, createWebHashHistory } from 'vue-router'
import Login from '@/views/Login' import Layout from '@/views/Layout' import category from '@/views/Category' const routes = [ { path: '/Login', component: Login }, { path: '/Layout', component: Layout, children: [ { name: 'category', // 添加动态路由参数 用占位符站位 /:id path: 'category/:id', component: category } ] } ]
const router = createRouter({ history: createWebHashHistory(), routes })
export default router
9.Dev-tools工具配置
可以检测定义的变量以及响应式的调试
也可以检测mutations里异步的操作
