vue3学习笔记（2）

路由导航守卫 

Pinia简介

 Pinia和vuex的区别

 1.Pinia数据仓库

Pinia简单使用 

1. Pinia安装：npm install pinia
2. 创建pinia： （createPinia）
3. main.js中注册Pinia:
4. 创建单个store：（defineStore）----导出的是一个函数，以use为前缀规范化编程
5. 组件中显示数据：

 关于Store介绍

1.Getters基本使用

getters:{
    //默认传入state参数
    doubleCount(state){
        return state.count * 2
    }
}

2. getter中传入另一个getter

doubleCountAddOne(){
    return this.doubleCount + 1
}

3.getters返回一个函数

getFriendById(state){
    return function(id){
        for(let i =0;i < state.friends.length;i++){
            const friend = state.frinends[i]
            if(friend.id===id){
                return friend
            }
        }
    }
}

4.getters中使用其他store的state数据

showMessage(state){
    const userStore = useUser() //导入其他store
    return `name:${userStore.name}-count:${state.count}`
}

Actions简单使用---和getters一样，action中可以通过this访问整个store实例的所有操作

//不带state这个默认传参
actions:{
    increment(){
        this.counter++
    },
    randomCounter(){
        this.counter = Math.random() //通过this访问state
    }
}

Actions中调用接口

async fetchHomeMultidata(){
    const res = await fetch("http://123.207.32.32:8000/home/multidata")
    const data = await res.json()
    this.banners = data.data.banner.list
    this.recommends = data.data.recommend.list
}

2.axios请求

初识axios

1. 在浏览器中发送XMLHttpRequest请求，不会浏览器兼容性问题
2. 在node.js中发送http请求
3. 支持promise API
4. 拦截请求和响应
5. 转换请求和响应数据

常用配置 

创建实例--axios.create()---实例是可以创建多个的

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000 // request timeout
})

 拦截器

axios封装--使用class封装 (简洁版)

 

return default new HTRequest()

---

调用： 

3.自定义指令的生命周期

 4.内置组件teleport使用

用于改变dom挂载，远程传输到指定标签内