尚硅谷 Vue3+TypeScript 学习笔记(中)

目录

三、路由

3.1. 【对路由的理解】

3.2. 【基本切换效果】

3.3. 【两个注意点】

3.4.【路由器工作模式】

3.5. 【to的两种写法】

3.6. 【命名路由】

3.7. 【嵌套路由】

3.8. 【路由传参】

query参数

params参数

3.9. 【路由的props配置】

3.10. 【 replace属性】

3.11. 【编程式导航】

3.12. 【重定向】

四、pinia

4.1【准备一个效果】

4.2【搭建 pinia 环境】

4.3【存储+读取数据】

4.4.【修改数据】(三种方式)

4.5.【storeToRefs】

4.6.【getters】

4.7.【$subscribe】

4.8. 【store组合式写法】


三、路由

3.1. 【对路由的理解】

尚硅谷 Vue3+TypeScript 学习笔记(中)_第1张图片

3.2. 【基本切换效果】

  • Vue3中要使用vue-router的最新版本,目前是4版本。

  • 路由配置文件代码如下:

import {createRouter,createWebHistory} from 'vue-router'
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'

const router = createRouter({
	history:createWebHistory(),
	routes:[
		{
			path:'/home',
			component:Home
		},
		{
			path:'/about',
			component:About
		}
	]
})
export default router
  • main.ts代码如下:
import router from './router/index'
app.use(router) # 使用你创建的路由器

app.mount('#app')
  • App.vue代码如下


3.3. 【两个注意点】

  1. 路由组件通常存放在pagesviews文件夹,一般组件通常存放在components文件夹。

  2. 通过点击导航,视觉效果上“消失” 了的路由组件,默认是被卸载掉的,需要的时候再去挂载

3.4.【路由器工作模式】

history模式

优点:URL更加美观,不带有#,更接近传统的网站URL

缺点:后期项目上线,需要服务端配合处理路径问题,否则刷新会有404错误。

const router = createRouter({
	history:createWebHistory(), //history模式
	/******/
})

hash模式

优点:兼容性更好,因为不需要服务器端处理路径。

缺点:URL带有#不太美观,且在SEO优化方面相对较差。

const router = createRouter({
	history:createWebHashHistory(), //hash模式
	/******/
})

3.5. 【to的两种写法】


主页


Home

3.6. 【命名路由】

作用:可以简化路由跳转及传参(后面就讲)。

给路由规则命名:

routes:[
  {
    name:'zhuye',
    path:'/home',
    component:Home
  },
  {
    name:'xinwen',
    path:'/news',
    component:News,
  },
  {
    name:'guanyu',
    path:'/about',
    component:About
  }
]

跳转路由:


跳转


跳转

3.7. 【嵌套路由】

1、编写News的子路由:Detail.vue

2、配置路由规则,使用children配置项:

const router = createRouter({
  history:createWebHistory(),
	routes:[
		{
			name:'zhuye',
			path:'/home',
			component:Home
		},
		{
			name:'xinwen',
			path:'/news',
			component:News,
			children:[
				{
					name:'xiang',
					path:'detail',
					component:Detail
				}
			]
		},
		{
			name:'guanyu',
			path:'/about',
			component:About
		}
	]
})
export default router

3、跳转路由(记得要加完整路径):

xxxx

xxxx

4、记得去Home组件中预留一个

3.8. 【路由传参】

query参数

传递参数



	跳转

				


  {{news.title}}

接收参数

import {useRoute} from 'vue-router'
const route = useRoute()
// 打印query参数
console.log(route.query)

params参数

传递参数


{{news.title}}
				


  {{news.title}}

接收参数

import {useRoute} from 'vue-router'
const route = useRoute()
// 打印params参数
console.log(route.params)

备注1:传递params参数时,若使用to的对象写法,必须使用name配置项,不能用path

备注2:传递params参数时,需要提前在规则中占位

备注3:传递params参数时,不能传对象和数组

注意:如果占位方式传参,可以设置不是必传,那就需要在路由路径加问号,比如我content想可传可不传,那就把路由路径 path:'detail/:id/:title/:content?'

3.9. 【路由的props配置】

作用:让路由组件更方便的收到参数(可以将路由参数作为props传给组件)

{
	name:'xiang',
	path:'detail/:id/:title/:content',
	component:Detail,

  // props的对象写法,作用:把对象中的每一组key-value作为props传给Detail组件
  // props:{a:1,b:2,c:3}, 

  // props的布尔值写法,作用:把收到了每一组params参数,作为props传给Detail组件
  // props:true
  
  // props的函数写法,作用:把返回的对象中每一组key-value作为props传给Detail组件
  props(route){
    return route.query
  }
}

接收参数

defineProps(['id','title','content'])

3.10. 【 replace属性】

  1. 作用:控制路由跳转时操作浏览器历史记录的模式。

  2. 浏览器的历史记录有两种写入方式:分别为pushreplace

    • push是追加历史记录(默认值)。

    • replace是替换当前记录。

  3. 开启replace模式:

News

3.11. 【编程式导航】

路由组件的两个重要的属性:$route$router变成了两个hooks

import {useRoute,useRouter} from 'vue-router'

const route = useRoute()
const router = useRouter()

console.log(route.query)
console.log(route.parmas)
console.log(router.push)
console.log(router.replace)

例如:

function showNewsDetail(news: any) {
    router.push({
        name: 'xiang',
        query: {
            id: news.id
            title: news.title,
            content: news.content
        }
    })
}

3.12. 【重定向】

  1. 作用:将特定的路径,重新定向到已有路由。

  2. 具体编码:

{
    path:'/',
    redirect:'/about'
}

四、pinia

集中式状态(数据)管理,vue2是vuex,vue3是pinia。

4.1【准备一个效果】

尚硅谷 Vue3+TypeScript 学习笔记(中)_第2张图片

4.2【搭建 pinia 环境】

第一步:npm install pinia

第二步:操作src/main.ts

import { createApp } from 'vue'
import App from './App.vue'

/* 引入createPinia,用于创建pinia */
import { createPinia } from 'pinia'

/* 创建pinia */
const pinia = createPinia()
const app = createApp(App)

/* 使用插件 */{}
app.use(pinia)
app.mount('#app')

此时开发者工具中已经有了pinia选项

尚硅谷 Vue3+TypeScript 学习笔记(中)_第3张图片

4.3【存储+读取数据】

1、Store是一个保存:状态业务逻辑 的实体,每个组件都可以读取写入它。

2、它有三个概念:stategetteraction,相当于组件中的: datacomputedmethods

3、具体编码:src/store/count.ts

// 引入defineStore用于创建store
import {defineStore} from 'pinia'

// 定义并暴露一个store
export const useCountStore = defineStore('count',{
  // 动作
  actions:{},
  // 状态
  state(){
    return {
      sum:6
    }
  },
  // 计算
  getters:{}
})

4、具体编码:src/store/talk.ts

// 引入defineStore用于创建store
import {defineStore} from 'pinia'

// 定义并暴露一个store
export const useTalkStore = defineStore('talk',{
  // 动作
  actions:{},
  // 状态
  state(){
    return {
      talkList:[
        {id:'yuysada01',content:'你今天有点怪,哪里怪?怪好看的!'},
     	{id:'yuysada02',content:'草莓、蓝莓、蔓越莓,你想我了没?'},
        {id:'yuysada03',content:'心里给你留了一块地,我的死心塌地'}
      ]
    }
  },
  // 计算
  getters:{}
})

5、组件中使用state中的数据





4.4.【修改数据】(三种方式)

1、第一种修改方式,直接修改

countStore.sum = 666

2、第二种修改方式:批量修改

countStore.$patch({
  sum:999,
  school:'atguigu'
})

3、第三种修改方式:借助action修改(action中可以编写一些业务逻辑)

import { defineStore } from 'pinia'

export const useCountStore = defineStore('count', {
  /*************/
  actions: {
    //加
    increment(value:number) {
      if (this.sum < 10) {
        //操作countStore中的sum
        this.sum += value
      }
    },
    //减
    decrement(value:number){
      if(this.sum > 1){
        this.sum -= value
      }
    }
  },
  /*************/
})

组件中调用action即可

// 使用countStore
const countStore = useCountStore()

// 调用对应action
countStore.incrementOdd(n.value)

4.5.【storeToRefs】

  • 借助storeToRefsstore中的数据转为ref对象,方便在模板中使用。

  • 注意:pinia提供的storeToRefs只会将数据做转换,而VuetoRefs会转换store中数据包括方法。




4.6.【getters】

1、概念:当state中的数据,需要经过处理后再使用时,可以使用getters配置。

2、追加getters配置。

// 引入defineStore用于创建store
import {defineStore} from 'pinia'

// 定义并暴露一个store
export const useCountStore = defineStore('count',{
  // 动作
  actions:{
    /************/
  },
  // 状态
  state(){
    return {
      sum:1,
      school:'atguigu'
    }
  },
  // 计算
  getters:{
    bigSum:(state):number => state.sum *10,
    upperSchool():string{
      return this. school.toUpperCase()
    }
  }
})

3、组件中读取数据:

const {increment,decrement} = countStore
let {sum,school,bigSum,upperSchool} = storeToRefs(countStore)

4.7.【$subscribe】

通过 store 的 $subscribe() 方法侦听 state 及其变化

talkStore.$subscribe((mutate,state)=>{
  console.log('LoveTalk',mutate,state)
  localStorage.setItem('talk',JSON.stringify(talkList.value))
})

4.8. 【store组合式写法】

import {defineStore} from 'pinia'
import axios from 'axios'
import {nanoid} from 'nanoid'
import {reactive} from 'vue'

export const useTalkStore = defineStore('talk',()=>{
  // talkList就是state
  const talkList = reactive(
    JSON.parse(localStorage.getItem('talkList') as string) || []
  )

  // getATalk函数相当于action
  async function getATalk(){
    // 发请求,下面这行的写法是:连续解构赋值+重命名
    let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    // 把请求回来的字符串,包装成一个对象
    let obj = {id:nanoid(),title}
    // 放到数组中
    talkList.unshift(obj)
  }
  return {talkList,getATalk}
})

你可能感兴趣的:(#,Vue,typescript,学习,笔记,pinia,vue3,vue,路由)